• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript 3.x 中常见的几种函数重载方法与应用示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

function showPerson (name, ...others) {
    console.log(name, others)
}

showPerson('tate', {age: 25, test: 'test str'})

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

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

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

function showPerson (name: string): void;
function showPerson (age: number): void;
function showPerson (play: () => void): void;

function showPerson (...args) {
    console.log(args)
    // 根据函数类型和数量作出不同的行为
}

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

function showPerson (name:string, age?: number, play?: () => void): void;

// 利用重载签名 对不同的缺省做相应的处理
function showPerson (name, age, play) {
    // dosomething
}

showPerson('tate', 25)

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

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

function playBasketball (name: 'YaoMing', age: number): void;
function playBasketball (name: 'Kobe', age?: number): void;
function playBasketball (name: 'James', age?: number): void;

function playBasketball (name: string, age: number) { if (name === 'YaoMing' && age && age >= 25) { console.log('good Center') } else if (name === 'Kobe') { console.log('good guard') } else if (name === 'Jams') { console.log('good forward') } else { console.log('ordinary baskerball player') } }
playBasketball('YaoMing', 25); playBasketball('Kobe'); 

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

interface BasketballPlayer {
    (name: 'YaoMing', age: number): void;
    (name: 'Kobe', age: number): void;
    (name: 'James', age: number): void;
}

let playBasketball: BasketballPlayer = function (name) {
    if (name === 'YaoMing') {
        // dosomething
    }
}

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

interface BasketballPlayer {
    (name: 'YaoMing', age: number): void;
    (name: 'Kobe', age: number): void;
    (name: 'James', age: number): void;
}


let playBasketball: BasketballPlayer = function (name = 'Yaoming', age: number) {
    if (age >= 25) {
        console.log('good center')
    }
}

let playBasketball2: BasketballPlayer = function (name = 'Kobe') {
    console.log('good guard')
}

let playBasketball3: BasketballPlayer = function (name = 'James') {
    console.log('good forward');
}  

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

 

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript中抽象类与接口详细对比与应用场景介绍发布时间:2022-07-18
下一篇:
typescript精简版1:用ts表示常见数据类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap