TypeScript函数详解

1、函数的定义方式（4种）

// （1）、命名函数
function add1(x: number, y: number): number {
return x + y;
}

// （2）、匿名函数
let add2: (x: number, y: number) => number = function(x: number, y: number) {
return x + y;
}

// （3）、类型别名
type Add3 = (x: number, y: number) => number;

// （4）、接口
interface Add4 {
(x: number, y: number): number;
}

在 Javascript 中，每个参数都是可选的，未传递的参数默认为 undefined。而在 TypeScript 中，函数的参数类型和数量必须严格匹配。

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

add(1, 2);
add(1, 2, 3); // 错误：应有 2 个参数，但获得了 3 个
add('1', 2); // 错误：类型“"1"”的参数不能赋给类型“number”的参数
add(1); // 错误：应有 2 个参数，但获得了 1 个

2、可选参数

在 TypeScript 中，可以通过在参数名后面添加 ? 来实现可选参数。可选参数必须跟在必需参数之后。

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

add(1);
// 错误：必选参数不能位于可选参数之后
function add2(x: number, y?: number, z: number): number {
return x + (y || 0) + z;
}

3、默认参数

在 TypeScript 中，可以为参数提供一个默认值。使用默认参数时需要注意以下两点：

• 如果带默认值的参数出现在必需参数之前，必须手动传入 undefined 来获得默认值。
• 如果带默认值的参数后面没有必需参数，则无须传入任何内容就可以获得默认值。

function add(a: number, b = 1, c: number, d = 2): number {
return a + b + c + d;
}

console.log(add(3, undefined, 4)); // 10 (3+1+4+2)
console.log(add(1, 2, 3, 4)); // 10 (1+2+3+4)
console.log(add(1, 2, 3)); // 8 (1+2+3+2)
console.log(add(1, 2)); // 错误：期望 3-4 个参数，但获得了 2 个

4、剩余参数

剩余参数允许将不定数量的参数作为数组传递。剩余参数必须放在参数列表的最后。

function add1(x: number, ...restParams: number[]): number {
return x + restParams.reduce((pre, cur) => pre + cur, 0);
}

console.log(add1(1, 2, 3, 4)); // 10

5、函数重载

函数重载是指使用相同的函数名，但函数的参数个数或类型不同，返回类型可以相同也可以不同。调用时，根据函数的参数来区分不同的函数。重载的好处是不需要为功能相近的函数使用不同的名称，从而提高代码的可读性。

在 TypeScript 中，重载需要先定义一系列名称相同的函数声明（即重载列表），并且在定义重载时，最精确的定义应放在前面。

function overload(...restParams: number[]): number;
function overload(...restParams: string[]): string;
function overload(...restParams: any[]): any {
let firstParam = restParams[0];
if (typeof firstParam === 'number') {
return restParams.reduce((prev, curr) => prev + curr, 0);
}
if (typeof firstParam === 'string') {
return restParams.join('');
}
}

console.log('传入数字参数，返回求和: ', overload(1, 2, 3));
// 传入数字参数，返回求和: 6
console.log('传入字符参数，返回拼接: ', overload('a', 'b', 'c'));
// 传入字符参数，返回拼接: abc