七、泛型

用来创建可重用的组件，即一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件

• 传入值类型与返回值类型相同，泛型使用类型变量，只用于表示类型而不是值
• 函数使用了类型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;

七、泛型

原文：https://blog.51cto.com/14533658/2436008