正文
TS学习之泛型
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据
不适用泛型的函数
function myfn(args: number): number {
return args;
}function myfn(args: any): any {
return args;
}
第一个只能传入number类型的参数，第二个虽然可以传入任意类型的参数，但是却丢失了部分信息：返回的类型应该和传入的类型相同
使用泛型函数（T：类型变量）
function myfn<T>(args: T): T {
return args;
}
调用方法：
let output = myfn<string>("Hello"); //明确传入类型参数
let output2 = myfn("Hello") //不传入类型参数，TS根据上下文自动推断类型
使用泛型变量（这可以让我们把泛型变量T当做类型的一部分使用，而不是整个类型）
function myfn<T>(args: T[]): T[] {
console.log(args.length)
return args;
}function myfn2<T>(args: Array<T>): Array<T> {
console.log(args.length);
return args;
}
创建泛型接口
interface Test {
<T>(args: T): T
}function myfn<T>(args: T): T {
return args;
}let myTest: Test = myfn;
泛型类（这里没有限定T的类型，可以传入任意类型）
class add<T>{
value: T;
add: (x: T, y: T) => T;
}
let myTest = new add<number>();
myTest.value = 0;
myTest.add = function (x, y) {
return x + y
}
泛型约束（类型变量继承接口）
interface Test{
length:number;
}
function myfn<T extends Test>(args:T):T{
console.log(args.length)
return args;
}
myfn(3); //error
myfn("abc") //
上例中，传入的参数必须具有length属性
