介绍
用来创建可重用的组件，即一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件
- 传入值类型与返回值类型相同，泛型使用类型变量，只用于表示类型而不是值
- 函数使用了类型T，T会捕获用户传入的类型（比如：number），之后就可以使用这个类型，最后再次用T当做返回值类型，这样就能保证传入类型跟返回值类型是相同的了
- 类型推论可以保持代码精简和高可读性，但是：对于负载类型编译器无法自动推断出类型的话，只能明确传入T的类型
泛型调用有两种方法:
- 传入所有参数，包含类型参数
- 更普遍调用方法：利用类型推论，即编译器会根据传入的参数自动的帮助我们确定T的类型
// 不使用泛型定义函数：
function identityNum(arg: number): number {
return arg;
}
// 或者使用any类型定义函数：
// 使用any类型导致函数可以接收任何类型的arg参数，这样的话传入的类型跟返回的类型可能就会不相同
function identityAny(arg: any): any {
return arg;
}
// 使用泛型定义函数：
// 下面函数使用了类型T，T会捕获用户传入的类型（比如：number），之后就可以使用这个类型，最后再次用T当做返回值类型，这样就能保证传入类型跟返回值类型是相同的了
function identity<T>(arg: T): T {
return arg;
}
// 使用泛型，1：传入所有的参数，包含类型参数
let output1 = identity<string>('myString');
// 使用泛型，2：类型推论
let output2 = identity('commonString');
使用泛型变量
// 报错原因是泛型是任意类型，有些属性是没有length属性的（比如：number），所以会报错
function identityVar<T>(arg: T): T {
// console.log(arg.length); // error
return arg;
}
// 使用泛型变量，接收任意类型的数组（比如：字符串数组，number数组），数组是有length属性的所以不会报错
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length);
return arg;
}
// 另一种实现方式：
function arrayIdentity<T>(arr: Array<T>): Array<T> {
console.log(arr.length);
return arr;
}
泛型类型
// 泛型接口
interface GenericIdentityFn {
<T>(arg: T) : T;
}
function identityIntf<T>(arg: T) : T {
return arg;
}
let myIdent: GenericIdentityFn = identityIntf;
// 可以把泛型参数当做整个接口的参数
interface GenericIdentityF<T> {
(arg: T): T;
}
function indetityT<T>(arg: T): T{
return arg;
}
let myIdetnd: GenericIdentityF<number> = indetityT;
泛型类
- 直接把泛型类型放在后面，可以帮助我们确认类的所有属性都在使用相同的类型
- 由于类包括两部分：静态部分、实例部分；泛型类指的是实例部分的类型，所以类的静态属性不能使用泛型类型
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
// 使用number类型
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y){
return x + y;
}
// 使用字符串类型
let stringNumberic = new GenericNumber<string>();
stringNumberic.zeroValue = '1111';
stringNumberic.add = function(x, y){
return x + y;
}
console.log(stringNumberic.add(stringNumberic.zeroValue, 'test'));
泛型约束
- 泛型被限制了约束以后就不再适用于任意类型
- 可以声明一个类型参数，且他被另一个类型参数所约束
interface Lengthwise {
length: number;
}
function lengthIdentity<T extends Lengthwise>(arg: T): T{
console.log(arg.length);
return arg;
}
// lengthIdentity(2); // error 泛型被定义了约束
// 需要传入符合约束的值，必须包含必须的属性
lengthIdentity({length: 10, value: 3});
// 在泛型中使用类类型
// 在TS使用泛型创建工厂函数时，需要引用构造函数的类类型
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();
}
let lion = createInstance(Lion);
// let nametag = createInstance(Lion).keeper.nametag;
// let hasMask = createInstance(Bee).keeper.hasMask;
