TypeScript 学习之泛型

泛型使用

• 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型。就需要使用泛型。
• 使用泛型就不会丢失类型信息，使用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;