使用条件类型实现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

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

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

如果你想开发小程序或者了解更多小程序的内容，可以通过专业开发公司，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发公司、APP开发、网站开发、H5小游戏开发