TS学习之泛型

Posted 2020-10-12 枫叶布

可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据

不适用泛型的函数

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") //3

上例中，传入的参数必须具有length属性