TypeScript 函数

函数是任何应用程序的基础构建块。TypeScript 中的函数与 JavaScript 中的函数类似,但提供了一些额外的功能。让我们深入探讨 TypeScript 中函数的各个方面。

函数类型

TypeScript 中有多种定义函数的方式:

函数声明:

function add(x: number, y: number): number {
  return x + y;
}

函数表达式:

const add = function (x: number, y: number): number {
  return x + y;
};

箭头函数:

const add = (x: number, y: number): number => {
  return x + y;
};

箭头函数提供了一种更简洁的语法来定义函数。如果函数体只有一条语句,可以省略大括号和 return 关键字:

const add = (x: number, y: number) => x + y;

参数

TypeScript 允许我们为函数参数指定类型注解,以确保传递给函数的参数类型正确。

可选参数:

function greet(name: string, greeting?: string) {
  // ...
}

通过在参数名后面添加 ?,我们可以使参数成为可选的。可选参数必须放在必需参数之后。

默认参数:

function greet(name: string, greeting: string = 'Hello') {
  // ...
}

我们可以为参数提供默认值。当调用函数时省略该参数,将使用默认值。

剩余参数:

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

使用扩展运算符 ...,我们可以接受任意数量的参数作为数组。这称为剩余参数。

函数重载

TypeScript 允许我们为同一个函数提供多个函数类型定义,称为函数重载。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

在上面的例子中,我们为 add 函数提供了两个重载签名:一个接受两个数字,另一个接受两个字符串。然后我们提供了一个兼容所有重载签名的实现签名。

当调用一个重载函数时,TypeScript 编译器会根据提供的参数类型来决定调用哪个重载。

最佳实践

命名函数时,使用描述性的动词或动词短语,清楚地表明函数的目的。

function calculateAverage(numbers: number[]): number {
  // ...
}

对于纯函数(给定相同的输入总是产生相同的输出,并且没有副作用),考虑使用 const 声明来表明函数的意图。

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

对于复杂的函数,考虑使用 JSDoc 注释来描述函数的目的、参数和返回值。

/**
 * Calculates the average of an array of numbers.
 * @param numbers - The array of numbers.
 * @returns The average of the numbers.
 */
function calculateAverage(numbers: number[]): number {
  // ...
}

函数应该专注于做一件事,并做好。如果一个函数变得太复杂,考虑将其拆分为多个更小、更集中的函数。