Appearance
函数
定义函数的几种方式
方式一：function
明确的指出函数参数的类型，返回值的类型则可以通过 TS 的类型推断省略
javascript
function test(x: number, y: number) {
return x + y;
}
test(12, 15);
1
2
3
4
2
3
4
方式二：通过变量定义函数类型
javascript
let myAdd0: (x: number, y: number) => number = function (
x: number,
y: number,
): number {
return x + y;
};
myAdd0(2, 10);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
方式三：通过类型别名定义函数类型
javascript
type Add1 = (x: number, y: number) => number;
let myAdd1: Add1 = (a, b) => a + b;
myAdd1(1, 2);
复制代码
方式四：通过接口定义函数类型
interface Add {
(x: number, y: number): number;
}
let myAdd: Add = (a, b) => a + b;
myAdd(30, 50);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
后三种只是定义了函数的类型，并没有真正的实现，因此在调用时，要书写函数体 在 TS 中形参和实参必须一一对应
函数中的可选参数
typescript
function myAdd(x: number, z: number, y?: number) {
if (y) {
return x + y + z;
} else return x + z;
}
myAdd(1, 2);
1
2
3
4
5
6
7
2
3
4
5
6
7
可选参数必须位于必选参数之后
函数中的参数默认值
typescript
function myAdd1(x: number, z = 10, y?: number) {
if (y) {
return x + y + z;
} else return x + z;
}
// 30
myAdd1(20);
function myAdd2(x: number, z = 10, a: number) {
return x + z + a;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
typescript
function myAdd3(x: number, y = 0, z: number, q = 1) {
return x + y + z + q;
}
// 报错：An argument for 'y' was not provided.
myAdd3(1);
1
2
3
4
5
6
2
3
4
5
6
在必选参数前，默认参数是不可省略的，必须明确的传入 undefined 来获取默认值
typescript
function myAdd3(x: number, y = 0, z: number, q = 1) {
return x + y + z + q;
}
// 5
console.log(myAdd3(1, undefined, 3));
1
2
3
4
5
6
2
3
4
5
6
函数中的剩余参数的类型
typescript
function myAdd3(x: number, ...rest: number[]) {
return x + rest.reduce((pre, cur) => pre + cur);
}
// 16
myAdd3(10, 1, 2, 3);
1
2
3
4
5
2
3
4
5
_函数重载， _
作用：不需要为了相似功能的函数取不同的函数名称。
JavaScript 本身是个动态语言。 JavaScript 里函数根据传入不同的参数而返回不同类型的数据是很常见的。 同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用
为了让编译器能够选择正确的检查类型，它与 JavaScript 里的处理流程相似。 它查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。
typescript
function add6(...rest: number[]): number;
function add6(...rest: string[]): string;
// 在一个类型更宽泛的函数中实现重载
function add6(...rest: any): any {
let first = rest[0];
if (typeof first === "string") {
return rest.join("|");
}
if (typeof first === "number") {
return rest.reduce((pre: number, cur: number) => pre + cur);
}
}
// 6
add6(1, 2, 3);
// a|b|c
console.log(add6("a", "b", "c"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
参数类型
typescript
const xw = { age: 18, height: 170 };
type IXw = typeof xw;
type IXwKey = keyof IXw;
function getXwValue(key: IXwKey) {
return xw[key];
}
1
2
3
4
5
6
2
3
4
5
6