泛型使用
- 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型。就需要使用泛型。
- 使用泛型就不会丢失类型信息,使用
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 .length
return arg;
}
T 是泛型,可以是任何类型,传入的类型可能没有 length
属性,所以报错。
- 修复方案
function loggingIdentity<T>(arg: T[]): T[] {
console.log(arg.length); // Error: T doesn't have .length
return 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.hashMask
const lion = createInstance(Lion);
lion.numLegs = 4;
lion.keeper.nametag = '狮子';
const bee = createInstance(Bee);
bee.numLegs = 4;
bee.keeper.hashMask = true;