假设有这样的一个函数,你会怎么来声明他的类型呢?
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(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(a: number, b: number): number
add(b, b);//function add(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(
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(a: string | number, b: string | number): string | number
这种方式是先通过泛型的方法获取到参数的类型,在使用条件类型进行判断,从而得出正确的类型。
这种方法相较于前两种方法写起来更复杂,但是类型会更加准确。在函数需要类型重载时,不妨考虑一下使用条件类型来实现。