使用 TypeScript：理解泛型（Generics）

泛型，顾名思义广泛的类型，是一种让组件一次支持多种类型的技术方案。大型软件系统的研发需要更为抽象的接口定义，以此达到更为合理的代码复用。

Hello world

在了解泛型之前，先看一个简单的加法函数定义

function add (x: number, y: number): number {
    return x + y;
}

当开发者想更多地使用此方法向外提供能力时，比如字符串的相加，此时就得对其进行改造，让接受的参数和返回的值包含字符串类型。可以使用any来兼容多种类型，代码如下：

function add (x: any, y: any): any {
    return x + y;
}

使用any固然可以达到所谓泛型的效果，可以支持多种类型值的传入和返回，但此时也会丢失对类型的校验能力。比如，传入2个number类型的值进行加法运算，从朴素的认知出发，应该返回number类型，但函数的这种定义形式只能返回any的类型。
typescript提供类型变量（type variables)可以解决上述的问题。类型变量作用于类型，而非实际的值，值的类型在使用时传入。使用类型变量改造前面的代码后，代码如下：

function add<T> (x: T, y: T): T {
    return x + y;
}

给add函数添加类型变量T，这样就可以获取到使用者传入的实际类型，类型系统也能据此做相应的类型校验。添加类型变量后，函数在调用时也需要传入相应的类型，使用示例如下：

const result = add<number>(3, 4);

类型变量的传入使用<>而不是()包裹，这里将number赋值给类型变量T，表明传入参数和返回类型都是number。

Generic Types

函数的泛型定义类似于函数的定义，但与其不同的是没有函数体，包含参数列表和返回类型的说明。比如将add赋值给另外一个定义的变量，代码如下

const myAdd: (x: T, y: T) => T = add;

也可以使用其他类型变量名来替换T，跟定义函数时使用不同的参数名称类似，比如将T换成InputType，代码如下：

const myAdd: (x: InputType, y: InputType) => InputType = add;

函数泛型的定义还可以使用调用签名的方式(call signature)，形式类似于对象常量(object literal)，代码如下：

const myAdd: { <T>(x: T, y: T): T } = add;

调用签名可以通过interface进行定义，这样在一处定义，其他使用此类型的地方都可以引用，该定义如下：

interface GenericAdd {
    <T>(x: T, y: T):  T
}
// myAdd在使用时需要传入相应的类型
const myAdd: GenericAdd = add;

在有些场景下，可以将类型变量T作为整个GenericAdd的类型变量，这样整个interface内部都可以使用这个类型变量，此时可以将类型变量提升作用域。代码如下：

interface GenericAdd<T> {
     (x: T, y: T):  T
}
// myAdd的输入和输出类型均为number
const myAdd: GenericAdd<number> = add;

通过上面的修改，我们生成了一个generic interface。

Generic Classes

泛型类跟泛型接口形式类似，在类名后使用<>包裹类型变量，并在类中使用该类型变量。
这里可以直接看官方的文档示例代码，代码如下：

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}
 
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

上述的代码传入number类型，当然也可以传入string类型，代码如下：

let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = '';
stringNumeric.add = function (x, y) {
  return x + y;
};

console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

不管是number还是string，这些都是简单的类型，用户同样可以传入更为复杂的自定义类型。

⚠️ generic class中的静态属性不能应用类型变量。详情参考这里

Generic Constraints

使用类型变量时，需要关注对类型使用的限制。以前面的add函数为例，假设在字符串相加的场景中需要判断字符串的长度，传入的字符串长度不能小于2，否则不执行字符串加法。代码可能如下：

function add<T> (x: T, y: T): T {
// Property 'length' does not exist on type 'Type'.
    if (x.length < 2 || y.length < 2) {
        return console.log('字符串的长度不能小于2');
    }
    return x + y;
}

在类型校验阶段，会抛出错误Property 'length' does not exist on type 'T'.。很明显，number类型的值是没有length属性的。
假设该方法只处理具有length属性类型的参数的加法，那么可以做相应的类型约束，让T从包含length属性的基础类型继承。代码如下：

interface WithLength {
    length: number;
}

function add<T extends WithLength> (x: T, y: T): T {
    if (x.length < 2 || y.length < 2) {
        return console.log('长度不能小于2');
    }
    return x + y;
}

对类型添加约束后，函数调用时类型系统会根据约束校验参数和返回值是否合法。

Using Type Parameters in Generic Constraints

受益于typescript提供的类型运算的能力，类型变量可以从其他类型变量生成而来。同样来看官方文档提供的获取对象属性的示例代码，代码如下：

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}
 
let x = { a: 1, b: 2, c: 3, d: 4 };
 
getProperty(x, "a");
//⚠️ m 不是 x 对象的属性，编译阶段会报错
getProperty(x, "m");

函数getProperty接收两个类型变量Type和Key，其中Key是基于对Type的类型运算生成的。keyof是对给定类型的运算，如果Type为对象类型，则其结果为一个对象key组成的union。以上面的代码为例：Key = 'a' | 'b' | 'c' | 'd'。

Using Class Types in Generics

在typescript中使用泛型构建实例工厂，需要关注构造函数的使用。如下代码：

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

这里需要注意定义构造函数的签名，构造函数返回的实例类型需给传入的class类型一致。
下面是一个更为复杂的示例：

class BeeKeeper {
  hasMask: boolean = true;
}
 
class ZooKeeper {
  nametag: string = "Mikle";
}
 
class Animal {
  numLegs: number = 4;
}
 
class Bee extends Animal {
  keeper: BeeKeeper = new BeeKeeper();
}
 
class Lion extends Animal {
  keeper: ZooKeeper = new ZooKeeper();
}
 
function createInstance<A extends Animal>(c: new () => A): A {
  return new c();
}
 
createInstance(Lion).keeper.nametag;
createInstance(Bee).keeper.hasMask;

这个示例展示了如何使用prototype（通过class和extend语法糖）约束类构造函数和类类型之间的关系。

小结

本文介绍了泛型/泛型约束/泛型类及其简单的使用示例，揭开typescript泛型神秘的面纱，让读者能否快速了解和使用泛型。同时本文也是typescript类型运算系列的第一篇，后续会带来其他类型运算的文章，敬请期待。