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

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

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

add函数可能有两种情况:

1. 参数a、b为number类型，返回值为number类型
2. 参数a、b为string类型，返回值为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 是使用这些重载来逐个比对的，直到匹配到合适的类型重载。但是显然，我们声明的两种重载中的变量类型，number和string都与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

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

条件类型可能会更好

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

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 中的函数重载的全部内容，感谢阅读。

以上关于如何使用条件类型来实现TypeScript中的函数重载？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。