所谓的重载,其实就是使用相同的函数名,传入不同数量的参数或不同类型的参数,以此创建出多个方法。
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在大型项目中带来的优势超乎我们的想象,其他各方面的分享将会持续进行,有兴趣的小伙伴可持续关注。