TypeScript的函数重载功能怎样用?一文带你了解写�
Admin 2022-01-24 群英技术资�
这篇文章我们来了解TypeScript的函数重载功能的相关内容,主要介绍TypeScript中函数重载写法,下文有很详细的介绍,对大家学习或工作会有帮助,接下来就跟随小编来一起学习一下吧�
大多数函数接受一组固定的参数。但有些函数可以接受可变数量的参数,不同类型的参数,甚至可以根据你调用函数的方式返回不同的类型。为了注释这样的函数,TypeScript 提供了函数重载功能�
我们先来考虑一个函数,它返回给一个特定的人的问候信息�
function greet(person: string): string { return `Hello, ${person}!`; }
上面的函数接�1个字符类型的参数:人的名字。调用该函数是非常简单的:
greet('World'); // 'Hello, World!'
如果你想� greet()
函数更加灵活,怎么办?例如,让它另外接受一个要问候的人的列表。这样的函数将接受一个字符串或字符串数组作为参数,并返回一个字符串或字符串数组�
如何对这样的函数进行注释?有2种方法�
第一种方法很简单,就是通过更新参数和返回类型直接修改函数签名。下面重构后greet()
的样�:
function greet(person: string | string[]): string | string[] { if (typeof person === 'string') { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error('Unable to greet'); }
现在我们可以用两种方式调� greet()
:
greet('World'); // 'Hello, World!' greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']
直接更新函数签名以支持多种调用方式是一种常见的好方法�
然而,在某些情况下,我们可能需要采用另一种方法,分别定义你的函数可以被调用的所有方式。这种方法被称为函数重载�
第二种方法是使用函数重载功能。当函数签名相对复杂且涉及多种类型时,我推荐使用这种方法�
定义函数重载需要定义重载签名和一个实现签名�
重载签名定义函数的形参和返回类型,没有函数体。一个函数可以有多个重载签名:对应于调用该函数的不同方式�
另一方面,实现签名还具有参数类型和返回类型,而且还有实现函数的主体,且只能有一个实现签名�
// 重载签名 function greet(person: string): string; function greet(persons: string[]): string[]; // 实现签名 function greet(person: unknown): unknown { if (typeof person === 'string') { return `Hello, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `Hello, ${name}!`); } throw new Error('Unable to greet'); }
greet()
函数有两个重载签名和一个实现签名�
每个重载签名都描述了可以调用该函数的一种方式。就 greet()
函数而言,我们可以用两种方式调用它:用一个字符串参数,或用一个字符串数组参数�
实现签名 function greet(person: unknown): unknown { ... }
包含了该函数如何工作的适当逻辑�
现在,和上面一样,可以用字符串或字符串数组类型的参数来调用 greet()
�
greet('World'); // 'Hello, World!' greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']
2.1 重载签名是可调用�
虽然实现签名实现了函数行为,但是它不能直接调用。只有重载签名是可调用的�
greet('World'); // 重载签名可调� greet(['小智', '大冶']); // 重载签名可调� const someValue: unknown = 'Unknown'; greet(someValue); // Implementation signature NOT callable // 报错 No overload matches this call. Overload 1 of 2, '(person: string): string', gave the following error. Argument of type 'unknown' is not assignable to parameter of type 'string'. Overload 2 of 2, '(persons: string[]): string[]', gave the following error. Argument of type 'unknown' is not assignable to parameter of type 'string[]'.
在上面的示例中,即使实现签名接受unknown
参数,也不能使用类型� unknown (greet(someValue))
的参数调� greet()
函数�
2.2 实现签名必须是通用�
// 重载签名 function greet(person: string): string; function greet(persons: string[]): string[]; // 此重载签名与其实现签名不兼容� // 实现签名 function greet(person: unknown): string { // ... throw new Error('Unable to greet'); }
重载签名函数 greet(person: string[]): string[]
被标记为�greet(person: unknown): string
不兼容�
实现签名� string
返回类型不够通用,不能与重载签名� string[]
返回类型兼容�
虽然在前面的例子中,函数重载被应用于一个普通函数。但是我们也可以重载一个方�
在方法重载区间,重载签名和实现签名都是类的一部分了�
例如,我们实现一� Greeter
类,有一个重载方�greet()
�
class Greeter { message: string; constructor(message: string) { this.message = message; } // 重载签名 greet(person: string): string; greet(persons: string[]): string[]; // 实现签名 greet(person: unknown): unknown { if (typeof person === 'string') { return `${this.message}, ${person}!`; } else if (Array.isArray(person)) { return person.map(name => `${this.message}, ${name}!`); } throw new Error('Unable to greet'); }
Greeter 类包� greet()
重载方法:2个重载签名描述如何调用该方法,以及包含正确实现的实现签名
由于方法重载,我们可以用两种方式调用 hi.greet()
:使用一个字符串或使用一个字符串数组作为参数�
const hi = new Greeter('Hi'); hi.greet('小智'); // 'Hi, 小智!' hi.greet(['王大�', '大冶']); // ['Hi, 王大�!', 'Hi, 大冶!']
函数重载,如果使用得当,可以大大增加可能以多种方式调用的函数的可用性。这在自动补全时特别有用:我们会在自动补全中列出所有可能的重载记录�
然而,在某些情况下,建议不要使用函数重载,而应该使用函数签名�
例如,不要对可选参数使用函数重载:
// 不推荐做� function myFunc(): string; function myFunc(param1: string): string; function myFunc(param1: string, param2: string): string; function myFunc(...args: string[]): string { // implementation... }
在函数签名中使用可选参数是足够�:
// 推荐做法 function myFunc(param1?: string, param2: string): string { // implementation... }
TypeScript中的函数重载让我们定义以多种方式调用的函数�
使用函数重载需要定义重载签名:一组带有参数和返回类型的函数,但没有主体。这些签名表明应该如何调用该函数�
此外,你必须写出函数的正确实现(实现签名):参数和返回类型,以及函数�。请注意,实现签名是不可调用的�
除了常规的函数之外,类中的方法也可以重载�
关于TypeScript的函数重载就介绍到这,上述示例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多大家可以关注群英网络其它的相关文章�
文本转载自PHP中文�
作者: dmitripavlutin
译者:前端小智
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章我们来了解JavaScript中类型转换的方法,JavaScript中类型转换有显式类型转换和隐式类型转换这两种,下面我们来详细的了解一下这两种类型转换及具体的试下,感兴趣的朋友就继续往下看吧�
这篇文章给大家分享的是jQuery实现全选效果的思路和方法。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
这篇文章主要为大家详细介绍了jQuery实现表格行数据滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
现在很多商品都有售后评价,那么五星好评的功能是怎样实现的呢?这篇文章就给大家分享一下用用js实现简易的五星好评功能,实现效果及代码如下,感兴趣的朋友就继续往下看吧�
这篇文章给大家分享的是vue怎样获取url参数的内容。下面介绍了两种方法,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078