当前位置：首页 > news >正文

TypeScript 中函数的理解及其与 JavaScript 函数的差异

news 2025/3/19 22:54:29

文章目录

- 一、函数概述
- 二、TypeScript 函数的使用
- - 函数类型的声明
  - 可选参数
  - 剩余参数
  - 函数重载
- 三、TypeScript 与 JavaScript 函数的差异

一、函数概述

在 JavaScript 应用程序中，函数是核心组成部分，它们帮助我们实现代码的抽象、模拟类、隐藏信息和模块化。TypeScript 在保留 JavaScript 函数的基础上，提供了额外的功能和更丰富的应用场景。尽管 TypeScript 支持类、命名空间和模块，函数仍是定义行为的主要方式。在 TypeScript 的类型系统中，函数类型扮演着极其关键的角色，是构建可组合系统的核心。

二、TypeScript 函数的使用

TypeScript 中定义函数的方式与 JavaScript 非常相似，可以通过 function 关键字或箭头函数来定义。以下是一个简单的加法函数示例：

const add = (a: number, b: number) => a + b;

在这个例子中，我们为函数的参数指定了类型，而函数的返回类型则由 TypeScript 编译器通过类型推断得出。

函数类型的声明

在不需要提供函数实现的情况下，我们可以用以下两种方式声明函数类型：

// 方式一
type LongHand = {(a: number): number;
};
// 方式二
type ShortHand = (a: number) => number;

在函数重载的情况下，我们通常使用方式一进行声明。

可选参数

如果函数的参数可能不存在，可以在参数名后加上 ? 来表示该参数是可选的：

const add = (a: number, b?: number) => a + (b ?? 0);

这样，参数 b 可以是 number 类型或者不传递。

剩余参数

TypeScript 中的剩余参数使用 ... 语法表示，如下所示：

const add = (a: number, ...rest: number[]) => rest.reduce((sum, current) => sum + current, a);

函数重载

TypeScript 允许我们定义同名但参数类型或数量不同的函数，这被称为函数重载。在使用函数重载时，我们需要将精确的函数声明放在前面，而在实现函数时，需要包含所有可能的输入类型。
以下是一个函数重载的示例，该函数可以处理字符串拼接或数字相加：

function add(arg1: string, arg2: string): string;
function add(arg1: number, arg2: number): number;
function add(arg1: string | number, arg2: string | number) {if (typeof arg1 === 'string' && typeof arg2 === 'string') {return arg1 + arg2;} else if (typeof arg1 === 'number' && typeof arg2 === 'number') {return arg1 + arg2;}
}