Typescript 常见的几种函数重载方法详解与应用示例

所谓的重载，其实就是使用相同的函数名，传入不同数量的参数或不同类型的参数，以此创建出多个方法或产生不同结果。

1. 最常见的，也就是根据定义傻瓜式地判断参数类型与数量

1function showPerson (name, ...others) {
2    console.log(name, others)
3}
4
5showPerson('tate', {age: 25, test: 'test str'})

2. 其次就是使用常规的重载签名

使用重载签名进行重载，好处在于可以对传入的参数进行限制，只有当签名存在对应类型或数量的参数时，才不会报错。

此处定义完重载签名之后，一定要有具体实现

1function showPerson (name: string): void;
2function showPerson (age: number): void;
3function showPerson (play: () => void): void;
4function showPerson (...args) {
5    console.log(args)
6    // 根据函数类型和数量作出不同的行为
7}

重载签名配合可选参数可以使重载变得更加灵活

1function showPerson (name:string, age?: number, play?: () => void): void;
2
3// 利用重载签名 对不同的缺省做相应的处理
4function showPerson (name, age, play) {
5    // dosomething
6}
7showPerson('tate', 25)

3.利用特定重载签名做更加细致的重载处理

鄙人比较喜欢NBA，就拿NBA举例。比如说现在需要写一个函数，符合此函数规则的只有三个人：姚明，科比和詹姆斯；只有当名字是姚明的时候，他才可以打中锋，是科比的时候才能打后卫，是詹姆斯的时候才能打前锋，并且因为国内球员比较瘦弱，所以只有当姚明是25岁以上的时候，才能被归为合格的中锋（只是举个例子，不要太当真），那这个时候就用到特定重载签名了。

1function playBasketball (name: 'YaoMing', age: number): void;
2function playBasketball (name: 'Kobe', age?: number): void
3function playBasketball (name: 'James', age?: number): void;
4
5function playBasketball (name: string, age: number) {
6    if (name === 'YaoMing' && age && age >= 25) {
7        console.log('good Center')
8    } else if (name === 'Kobe') {
9        console.log('good guard')
10    } else if (name === 'Jams') {
11        console.log('good forward')
12    } else {
13        console.log('ordinary baskerball player')
14    }
15}
16
17playBasketball('YaoMing', 25);
18playBasketball('Kobe');

4. 使用接口搭配重载签名或非重载签名

1interface BasketballPlayer {
2    (name: 'YaoMing', age: number): void;
3    (name: 'Kobe', age: number): void;
4    (name: 'James', age: number): void;
5}
6let playBasketball: BasketballPlayer = function (name) {
7    if (name === 'YaoMing') {
8        // dosomething
9    }
10}

使用接口配合函数的默认参数，可实现特定重载签名的效果：

1interface BasketballPlayer {
2    (name: 'YaoMing', age: number): void;
3    (name: 'Kobe', age: number): void;
4    (name: 'James', age: number): void;
5}
6let playBasketball: BasketballPlayer = function (name = 'Yaoming', age: number) {
7    if (age >= 25) {
8        console.log('good center')
9    }
10}
11
12let playBasketball2: BasketballPlayer = function (name = 'Kobe') {
13    console.log('good guard')
14}
15
16let playBasketball3: BasketballPlayer = function (name = 'James') {
17    console.log('good forward');
18}

此处其并非严格意义上的重载，但是却利用了重载的思想，并且灵活搭配了函数的默认参数。

TS在大型项目中带来的优势超乎我们的想象，其他各方面的分享将会持续进行，有兴趣的小伙伴可持续关注。

Typescript 常见的几种函数重载方法详解与应用示例

评论区

相关推荐