TypeScript基础之泛型介绍

前言

文中内容都是参考https://www.typescriptlang.org/docs/handbook/2/generics.html内容。

泛型介绍

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值

泛型之Hello World

在之前underscore源码解析内部函数createAssigner、cb和optimizeCb中讲过identity函数：

// 返回传入的参数
function identity(value) {
  return value;
}

该函数会返回任何传入它的值, 由于其可以接收任意值， 即函数入参和返回值类型一样，且都是可以为任意类型。
在TS中，我们不使用泛型的话， 这个函数可能是下面这样：

function identity(value: number): number {
  return value;
}

或者，我们可以使用any类型来定义函数

function identity(value: any): any {
  return value;
}

但是使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如随便传入一个类型，返回的都是any类型

function identity(value: any): any {
  return value;
}

let num = identity(100);
// let num: any
let arr = num.split("");

此时 num类型为any， 我们知道 在 any 类型的变量上，访问任何属性都是允许的。 但是，使用any的同时，它极有可能掩盖了真正的类型错误。例如此例子会导致运行时错误, 出现Uncaught TypeError: num.split is not a function错误。
如何解决呢？ 我们需要一种方法使返回值的类型与传入参数的类型是相同的。 这里，我们使用了 类型变量，它是一种特殊的变量，只用于表示类型而不是值。

function identity<T>(value: T): T {
  return value;
}

现在我们给identity函数添加了类型变量T。 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。
类型变量T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。 且后面我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。
现在这个identity函数就是一个泛型函数，因为它可以适用于多个类型。 不同于使用 any，它不会丢失信息，传入数值类型并返回数值类型。

我们定义了泛型函数后，可以用两种方法使用。

1. 传入所有的参数，包括类型参数

let output = identity<string>("myString");
// let output: string

这里我们明确的指定了T是string类型，并做为一个参数传给函数，使用了<>括起来而不是().
2. 不用传类型参数

let output = identity("myString");
// let output: string

利用了类型推论 – 即编译器会根据传入的参数自动地帮助我们确定T的类型。编译器可以查看myString的值，然后把T设置为它的类型。 类型推论帮助我们保持代码精简和高可读性。
在一些更加复杂的例子中，当编译器推断类型失败，你才需要明确的传入参数。

使用泛型类型变量

如果我们想输出value的长度：

function loggingIdentity<T>(value: T): T {
  console.log(value.length);  // Property 'length' does not exist on type 'T'.
  return value;
}

此时， 编译器会提示Property 'length' does not exist on type 'T'.， 报错的原因在于 T 理论上是可以是任何类型的, 不同于any， 你不管使用它的什么属性或者方法都会报错（除非这个属性和方法是所有集合共有的）。

现在假设这个函数，使用的是 T 类型的数组 。因为我们使用的是数组，.length 属性肯定存在。我们就可以像创建其他类型的数组一样写：

function loggingIdentity<T>(value: T[]): T[] {
  console.log(value.length);    // 没毛病
  return value;
}

解释： 泛型函数 loggingIdentity 接受一个 T 类型参数和一个实参 value，实参 value 是一个 T 类型的数组。而该函数返回一个 T 类型的数组。
现在我们使用类型变量 T，是作为我们使用的类型的一部分，而不是之前的一整个类型:

function loggingIdentity<T>(value: Array[T]): Array[T] {
  console.log(value.length);     
  return value;
}

小结： 当我们在identity 这样的泛型函数时，应该正确的使用这些类型参数。即应该考虑到它们可能是任何一个、甚至是所有的类型（比如用了联合类型）。

泛型约束

function loggingIdentity<T>(value: T): T {
  console.log(value.length);  // Property 'length' does not exist on type 'T'.
  return value;
}

现在我们想要限制函数去处理带有.length属性的所有类型，因此我们需要列出对于T的约束要求， 即传入的类型中至少包含这一属性。
我们可以使用 extends 关键字可以做到这一点。简单来说就是你定义一个接口来描述约束条件（即创建一个包含.length属性的接口），然后让 T 实现这个接口即可：

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(value: T): T {
  console.log(value.length);  // 没毛病
  return value;
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

loggingIdentity(100);
// Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.

我们需要传入符合约束类型的值，必须包含必须的属性：

loggingIdentity([1]);   // 没毛病

loggingIdentity({length: 20, name: 'zxx'});     // 没毛病

以上ts代码均在 https://www.typescriptlang.org/play 上运行过，版本为4.7.2。
最后， 如有错误，欢迎各位大佬指点！感谢！

参考资料

https://www.typescriptlang.org/docs/handbook/2/generics.html