理解TypeScript的泛型-技术圈

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

泛型函数

// arg 参数类型是一个泛型变量 T，也可以使用不同的泛型参数名function identity<T>(arg: T): T {    return arg;}

们定义了泛型函数后，可以用两种方法使用。第一种是，传入所有的参数，包含类型参数：

let output = identity<string>("myString");  // type of output will be 'string'

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

第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型：

let output = identity("myString");  // type of output will be 'string'

注意我们没必要使用尖括号（<>）来明确地传入类型；编译器可以查看 myString 的值，然后把 T 设置为它的类型。类型推论帮助我们保持代码精简和高可读性。如果编译器不能够自动地推断出类型的话，只能像上面那样明确的传入 T 的类型，在一些复杂的情况下，这是可能出现的。

泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面。

泛型接口

接口能够描述 JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

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>();

泛型约束

我们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。在 loggingIdentity 例子中，我们想访问 arg 的 length 属性，但是编译器并不能证明每种类型都有 length 属性，所以就报错了。

function loggingIdentity<T>(arg: T): T {    console.log(arg.length);  // Error: T doesn't have .length    return arg;}

相比于操作 any 所有类型，我们想要限制函数去处理任意带有 .length 属性的所有类型。只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。为此，我们需要列出对于T的约束要求。

为此，我们定义一个接口来描述约束条件。创建一个包含 .length 属性的接口，使用这个接口和 extends 关键字来实现约束：

interface Lengthwise {    length: number;}
function loggingIdentity<T extends Lengthwise>(arg: T): T {    console.log(arg.length);  // Now we know it has a .length property, so no more error    return arg;}