详解 TypeScript 函数声明和重载_js教程

详解 TypeScript 函数声明和重载

在 JavaScript 中，函数是构建应用的一块基石，我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在TypeScript中，函数仍然是最基本、最重要的概念之一。下面就来看看TypeScript中的函数类型是如何定义和使用的。

一、函数类型定义

1. 直接定义

函数类型的定义包括对参数和返回值的类型定义：

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

这里用function字面量和箭头函数两种形式定义了add函数。函数参数 arg1 和 arg2 都是数值类型，最后通过相加得到的结果也是数值类型。

如果在这里省略参数的类型，TypeScript 会默认这个参数是 any 类型;如果省略返回值的类型，如果函数无返回值，那么 TypeScript 会默认函数返回值是 void 类型;如果函数有返回值，那么 TypeScript 会根据定义的逻辑推断出返回类型。

需要注意，在TypeScript中，如果函数没有返回值，并且我们显式的定义了这个函数的返回值类型为 undefined，那就会报错：A function whose declared type is neither 'void' nor 'any' must return a value。正确的做法就是上面说的，将函数的返回值类型声明为void：

function fn(x: number): void {
console.log(x)
}

一个函数的定义包括函数名、参数、逻辑和返回值。为函数定义类型时，完整的定义应该包括参数类型和返回值类型。上面都是在定义函数的指定参数类型和返回值类型。下面来定义一个完整的函数类型，以及用这个函数类型来规定一个函数定义时参数和返回值需要符合的类型。

let add: (x: number, y: number) => number;
add = (arg1: number, arg2: number): number => arg1 + arg2;
add = (arg1: string, arg2: string): string => arg1 + arg2; // error

这里定义了一个变量 add，给它指定了函数类型，也就是(x: number, y: number) => number，这个函数类型包含参数和返回值的类型。然后给 add 赋了一个实际的函数，这个函数参数类型和返回类型都和函数类型中定义的一致，所以可以赋值。后面又给它赋了一个新函数，而这个函数的参数类型和返回值类型都是 string 类型，这时就会报如下错误：

不能将类型"(arg1: string, arg2: string) => string"分配给类型"(x: number, y: number) => number"。
参数"arg1"和"x" 的类型不兼容。
不能将类型"number"分配给类型"string"。

注意：函数中如果使用了函数体之外定义的变量，这个变量的类型是不体现在函数类型定义的。

2. 接口定义

使用接口可以清晰地定义函数类型。下面来使用接口为add函数定义函数类型：

interface Add {
(x: number, y: number): number;
}
let add: Add = (arg1: string, arg2: string): string => arg1 + arg2;
// error 不能将类型“(arg1: string, arg2: string) => string”分配给类型“Add”

通过接口形式定义了函数类型，这个接口Add定义了这个结构是一个函数，两个参数类型都是number类型，返回值也是number类型。当指定变量add类型为Add时，再要给add赋值，就必须是一个函数，且参数类型和返回值类型都要满足接口Add，显然这个函数并不满足条件，所以报错了。

3. 类型别名定义

可以使用类型别名来定义函数类型，这种形式更加直观易读：

type Add = (x: number, y: number) => number;
let add: Add = (arg1: string, arg2: string): string => arg1 + arg2;
// error 不能将类型“(arg1: string, arg2: string) => string”分配给类型“Add”

使用type关键字可以给任何定义的类型起一个别名。上面定义了 Add 这个别名后，Add就成为了一个和(x: number, y: number) => number一致的类型定义。上面定义了Add类型，指定add类型为Add，但是给add赋的值并不满足Add类型要求，所以报错了。

注意，这里的=>与 ES6 中箭头函数的=>不同。TypeScript 函数类型中的=>用来表示函数的定义，其左侧是函数的参数类型，右侧是函数的返回值类型;而 ES6 中的=>是函数的实现。

二、函数参数定义

1. 可选参数

TypeScript 会在编写代码时就检查出调用函数时参数中存在的一些错误：

type Add = (x: number, y: number) => number;
let add: Add = (arg1, arg2) => arg1 + arg2;
add(1, 2); // success
add(1, 2, 3); // error 应有 2 个参数，但获得 3 个
add(1); // error 应有 2 个参数，但获得 1 个

在JavaScript中，上面代码中后面两个函数调用都不会报错, 只不过add(1, 2, 3)可以返回正确结果3，add(1)会返回NaN。而在TypeScript中我们设置了指定的参数，那么在使用该类型时，传入的参数必须与定义的参数类型和数量一致。

但有时候，函数有些参数不是必须的，我们就可以将函数的参数设置为可选参数。可选参数只需在参数名后跟随一个?即可：

type Add = (x: number, y: number, z?: number) => number;
let add: Add = (arg1, arg2, arg3) => arg1 + arg2 + arg3;
add(1, 2); // success 3
add(1, 2, 3); // success 6

上面的代码中，z是一个可选参数，那他的类型就是number | undefined，表示参数 z 就是可缺省的，那是不是意味着可缺省和类型是 undefined 等价呢?来看下面的例子：

function log(x?: number) {
console.log(x);
}
function log1(x: number | undefined) {
console.log(x);
}
log();
log(undefined);
log1(); // Expected 1 arguments, but got 0
log1(undefined);

可以看到，第三次函数调用报错了，这里的 ?: 表示在调用函数时可以不显式的传入参数。但是，如果声明了参数类型为 number | undefined，就表示函数参数是不可缺省且类型必须是 number 或者 undfined。

需要注意，可选参数必须放在必选参数后面，这和在 JS 中定义函数是一致的。来看例子：

type Add = (x?: number, y: number) => number; // error 必选参数不能位于可选参数后。

在TypeScript中，可选参数必须放到最后，上面把可选参数x放到了必选参数y前面，所以报错了。在 JavaScript 中是没有可选参数这个概念的，只不过在编写逻辑时，可能会判断某个参数是否为undefined，如果是则说明调用该函数的时候没有传这个参数，要做下兼容处理;而如果几个参数中，前面的参数是可不传的，后面的参数是需要传的，就需要在该可不传的参数位置传入一个 undefined 占位才行。

2. 默认参数

在 ES6 标准出来之前，默认参数实现起来比较繁琐：

var count = 0;
function counter(step) {
step = step || 1;
count += step;
}

上面定义了一个计数器增值函数，这个函数有一个参数 step，即每次增加的步长，如果不传入参数，那么 step 接受到的就是 undefined，undefined 转换为布尔值是 false，所以 step || 1 这里取了 1，从而达到了不传参数默认 step === 1 的效果。

在 ES6 中，定义函数时给参数设默认值直接在参数后面使用等号连接默认值即可：

const count = 0;
const counter = (step = 1) => {
count += step;
};

当为参数指定了默认参数时，TypeScript 会识别默认参数的类型;当调用函数时，如果给这个带默认值的参数传了别的类型的参数则会报错：

const add = (x: number, y = 2) => {
return x + y;
};
add(1, "ts"); // error 类型"string"的参数不能赋给类型"number"的参数

当然也可以显式地给默认参数 y 设置类型：

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

注意：函数的默认参数类型必须是参数类型的子类型，如下代码：

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

这里 add 函数参数 y 的类型为可选的联合类型 number | string，但是因为默认参数数字类型是联合类型 number | string 的子类型，所以 TypeScript 也会检查通过。

3. 剩余参数

在 JavaScript 中，如果定义一个函数，这个函数可以输入任意个数的参数，那么就无法在定义参数列表的时候挨个定义。在 ES6 发布之前，需要用 arguments 来获取参数列表。arguments 是一个类数组对象，它包含在函数调用时传入函数的所有实际参数，它还包含一个 length 属性，表示参数个数。下面来模拟实现函数的重载：