如何使用条件类型来实现TypeScript中的函数重载?

假设有这样的一个函数,你会怎么来声明他的类型呢?

function add(a,b){
    return a+b;
}

add函数可能有两种情况:

  1. 参数a、bnumber类型,返回值为number类型
  2. 参数a、bstring类型,返回值为string类型

使用函数重载能解决吗?

首先,你可能会通过声明多个函数类型,来实现对add函数的重载声明。

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any) {
    return a + b;
}
add(1, 2); //function add(a: number, b: number): number
add('x', 'y'); //function add(a: string, b: string): string

这种方法显然不错,但是有一个小问题:当传入的参数类型是number|string时,会出现意想不到的类型错误。

let a:string|number;
add(a,a);
/*
  第 1 个重载(共 2 个),“(a: string, b: string): string”,出现以下错误。
    类型“string | number”的参数不能赋给类型“string”的参数。
      不能将类型“number”分配给类型“string”。
  第 2 个重载(共 2 个),“(a: number, b: number): number”,出现以下错误。
    类型“string | number”的参数不能赋给类型“number”的参数。
      不能将类型“string”分配给类型“number”。
*/

这是因为当我们使用函数重载时,TypeScript是使用这些重载来逐个比对的,直到匹配到合适的类型重载。但是显然,我们声明的两种重载中的变量类型,numberstring都与number|string不匹配,所以出现了类型错误。

使用泛型怎么样呢?

然后,你还可能会想到使用泛型来声明类型,以便构建一种通用的模式。

function add<T extends number | string>(a: T, b: T): T;
function add(a: any, b: any) {
    return a + b;
}
const a:number = 0;
const b:string='str';
add(a, a);//function add<number>(a: number, b: number): number
add(b, b);//function add<string>(a: string, b: string): string

这个方法看起来也很好,但是同样有一个小问题:当传入字面量类型的参数时,该参数的类型会被认为和参数的值相同的类型。例如:

add(1,2);//function add<1 | 2>(a: 1 | 2, b: 1 | 2): 1 | 2

参数1type1,而number,就如同我们声明了 type T=1|2;一样,函数类型声明中的泛型T既要满足第一个参数1,又要满足第二个参数2,所以T的类型成为了1|2;同样的,如果传入的变量a、b没有显式的类型声明numberstring,也会出现这个问题。

条件类型可能会更好

其实,在这种函数需要重载的时候使用条件类型,可能会有更好的效果。

function add<T extends number | string>(
    a: T,
    b: T
): T extends number ? number : string;
function add(a: any, b: any) {
    return a + b;
}
add(1,2);//function add<1 | 2>(a: 1 | 2, b: 1 | 2): number
let a:number|string;
add(a, a);//function add<string | number>(a: string | number, b: string | number): string | number

这种方式是先通过泛型的方法获取到参数的类型,在使用条件类型进行判断,从而得出正确的类型。

这种方法相较于前两种方法写起来更复杂,但是类型会更加准确。在函数需要类型重载时,不妨考虑一下使用条件类型来实现。

以上就是今天关于如何实现TypeScript中的函数重载的全部内容,感谢阅读。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何使用条件类型来实现TypeScript中的函数重载?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们