当前位置：首页 > news >正文

TypeScript 学习之泛型

news 2025/6/29 20:07:54

泛型使用

组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型。就需要使用泛型。
使用泛型就不会丢失类型信息，使用any会丢失类型信息。

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

identity 添加了类型变量T, T 捕获用户传入的类型，就可以使用T类型。可以看到T作为函数参数的类型和返回值类型。如果当用户传入number类型，那么identity函数的参数类型和返回值类型都是number。

确定泛型类型

第一种方法，传入确定的类型

let output = identity<string>('myString'); // 明确泛型为string

第二种方法：类型推论

let output = identity('myString'); // typescript 自动推断出类型为 string

使用泛型变量

函数的参数使用变量，函数体必须正确的使用这些参数。

function loggingIdentity<T>(arg: T): T {console.log(arg.length); // Error: T doesn't have .lengthreturn arg;
}

T 是泛型，可以是任何类型，传入的类型可能没有 length属性，所以报错。

修复方案

function loggingIdentity<T>(arg: T[]): T[] {console.log(arg.length); // Error: T doesn't have .lengthreturn arg;
}

泛型类型

泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面。

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

可以使用不同的泛型参数名，只要数量上和使用方式上能对应上就可以。

function identity<T>(arg: T): T {return arg;
}let myIdentity: <U>(arg: U) => U = identity;

使用带有调用签名的对象字面量来定义泛型函数：

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;

一个泛型参数作为整个接口的一个参数

interface GenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = 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;
};

类有两部分：静态部分和实例部分，泛型类指的是实例部分的类型，所以类的静态属性不能使用泛型类型。

泛型约束

给定泛型一些属性的约束，传入的类型必须拥有这些属性。

interface Lengthwise {length: number;
}// 泛型T给定了 Lengthwise 类型约束，传入的值，必须包含 lengthwise 类型的属性
function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);return arg;
}

在泛型里使用类类型

使用泛型创建工厂函数时，需要引用构造函数的类类型

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

原型属性推断并约束构造函数与类实例的关系

class BeeKeeper {hashMask: 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;
// createInstance(Bee).keeper.hashMaskconst lion = createInstance(Lion);
lion.numLegs = 4;
lion.keeper.nametag = '狮子';const bee = createInstance(Bee);
bee.numLegs = 4;
bee.keeper.hashMask = true;