ts的函数

ts的Functions

大部分基础内容可以通过这篇blog学习👉Functions - TypeScript Deep Dive

函数类型在TypeScript类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建块.

1.Parameter annotations

你可以像变量注解一样，给function类型进行注解.

// variable annotation
let sampleVariable: { bar: number }

// function parameter annotation
function foo1(sampleParameter: { bar: number }) { }

let foo2 = (sampleParameter: { bar: number }) => {}
1
2
3
4
5
6
7

1.1剩余参数

const fn = (array:number[],...items:any):any[] => {
    console.log(array,items)
    return items
}

console.log(fn([1,2,3],'J4ck',true));
/*
output:
[ 1, 2, 3 ] [ 'J4ck', true ]
[ 'J4ck', true ]
*/
1
2
3
4
5
6
7
8
9
10
11

1.2this参数

看起来有点像python的self，只能写在参数列表的第1个.

interface Obj {
    name: string
    // 限定getName调用时的this类型
    getName(this: Obj): string
}
const obj: Obj = {
    name: "J4ck",
    getName() {
        return this.name
    },
}
obj.getName() //output:J4ck
1
2
3
4
5
6
7
8
9
10
11
12

这样this就会指向调用getName()的obj了.

2.Overloading

TypeScript中提供了函数重载的机制，不过这个重载其实从1个Javaer的角度来看感觉怪怪的。

实现一个padding()来举例，熟悉css的同学肯定知道padding支持好几种写法

.sample1 {
    /* 应用于所有边 */
    padding: 5px;
}

.sample2 {
    /* 上边下边 | 左边右边 */
    padding: 5px 5px;
}

.sample3 {
    /* 上边 | 右边 | 下边 | 左边 */
    padding: 5px 5px 5px 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以看到需要重载3个，因此需要声明4个function header,并且在声明最后1个function header后实现整个方法，这就是在我看来非常诧异的地方.

可以看到3个重载函数的实现逻辑都在最后1个function中，用if(parameter === undefind)这样的写法去判断传入了哪些parameter，并跳到对应的代码块中.

// Overloads
function padding(all: number);
function padding(topAndBottom: number, leftAndRight: number);
function padding(top: number, right: number, bottom: number, left: number);
// Actual implementation that is a true representation of all the cases the function body needs to handle
function padding(a: number, b?: number, c?: number, d?: number) {
    if (b === undefined && c === undefined && d === undefined) {
        b = c = d = a;
    }
    else if (c === undefined && d === undefined) {
        c = a;
        d = b;
    }
    return {
        top: a,
        right: b,
        bottom: c,
        left: d
    };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

TypeScript 中的函数重载没有任何运行时开销。它只允许你记录希望调用函数的方式，并且编译器会检查其余代码。

不过这只是举1个例子，其实对于能够使用可选参数实现的function并不推荐使用函数重载。

通过查阅一些资料，我自己总结了一下.

1. TypeScript因为可选参数的存在，所以在参数列表涉及数量多少的，可以用可选参数实现。

function padding(all: number);
function padding(topAndBottom: number, leftAndRight: number);
//=========================//
function padding(a: number, b?: number);
1
2
3
4

2. 参数列表里参数类型不同的时候，可以使用函数重载实现.

function showName(name:string): string;
function showName(names:string[]): string[];
function showName(names: unknown): unknown{
    if (typeof names === 'string') {
        return `${names}`;
      } else if (Array.isArray(names)) {
        return names.map(name => `${name}`);
      }
}

console.log(showName('J4ck'));   //output:J4ck
console.log(showName(['J4ck','Ju11y']));   //output:[ 'J4ck', 'Ju11y' ]
1
2
3
4
5
6
7
8
9
10
11
12