Typescript泛型

定义

使用<T>来定义类型，使用泛型，是Typescript中的类型定义更加灵活，相比于any也更加具有语义化。

<T>中的T可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。

function identity<T>(arg: T): T {
    return arg;
}
function identity<T>(arg: T): T {
    console.log(arg.length) //error: arg maybe a number
    return arg;
}

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

类型

泛型函数

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

泛型接口

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity;

泛型类

泛型类使用 <>括起泛型类型，跟在类名后面

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束

在上面的例子中了泛型，但console中不能打印出参数的length，使用泛型约束可以解决这个问题

function identity<T>(arg: T): T {
    console.log(arg.length) //error: arg maybe a number
    return arg;
}

使用接口和extends可以泛型约束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}
loggingIdentity(3);  // Error, number doesn't have a .length property

定义了泛型约束后，参数就不能随便传递

类型参数

声明一个类型参数，且它被另一个类型参数所约束。比如，现在我们想要用属性名从对象里获取这个属性。并且我们想要确保这个属性存在于对象 obj上，因此我们需要在这两个类型之间使用约束

function getProperty(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

泛型里使用类类型

在TypeScript使用泛型创建工厂函数时，需要引用构造函数的类类型。比如

function create<T>(c: {new(): T; }): T {
    return new c();
}

一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系。

class BeeKeeper {
    hasMask: boolean;
}

class ZooKeeper {
    nametag: string;
}

class Animal {
    numLegs: number;
}

class Bee extends Animal {
    keeper: BeeKeeper;
}

class Lion extends Animal {
    keeper: ZooKeeper;
}

function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}

createInstance(Lion).keeper.nametag;  // typechecks!
createInstance(Bee).keeper.hasMask;   // typechecks!

本文参考https://www.tslang.cn/docs/handbook/generics.html

脑图

泛型.png