假设有这样的一个函数，你会怎么来声明他的类型呢？
function add(a,b){
return a+b;
}
add函数可能有两种情况:
- 参数
a、b为number类型，返回值为number类型 - 参数
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 中的函数重载的全部内容，感谢阅读。