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

Easter79
• 阅读 1072

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4天前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
C和C++的区别 04.函数重载
函数重载(Overload):用同一函数名定义不同的函数,当函数名和不同参数搭配时函数的意义不同。也就是说,函数重载就是,名字一样,参数不同。参数不同有三种:个数不同、类型不同、顺序不同。形参的名字和返回值相不相同无所谓。来看看编译器调用重载函数的准则:(看不懂或者觉得晕可以不看)将所有同名函数作为候选者尝试寻找可行的候选函数
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
JVM总结
重载与重写在Java程序里,如果同一个类中出现多个名字相同,并且参数类型相同的方法,那么它无法通过编译。也就是说,在正常情况下,如果我们想要在同一个类中定义名字相同的方法,那么它们的参数类型必须不同。这些方法之间的关系,我们称之为重载。重载的方法在编译过程中即可完成识别。具体到每一个方法调用,Java编译器会根据所传入参数的声明类型
Wesley13 Wesley13
2年前
04 JVM是如何执行方法调用的(上)
重载和重写重载:同一个类中定义名字相同的方法,但是参数类型或者参数个数必须不同。重载的方法在编译过程中就可完成识别。具体到每一个方法的调用,Java编译器会根据所传入参数的生命类型来选取重载方法。选取的过程分以下三个阶段:1:在不考虑对基本类型自动装拆箱,以及可变长参数的情况下选取重载方法。2:如果第1个阶段未找到,那么在允许自动
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k