在 TypeScript 中我们会使用泛【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】型来对函数的相关类型进行约束。这里的函数【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】，同时包含 class 的构造函数，因此本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，一个类的声明部分，也可以使用泛型。那么【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，究竟什么是泛型？如果通俗的理解泛型呢？

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

什么是泛型

泛型（Generics）是指在定义函数、【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】接口或类的时候，不预先指定具体的类型，而转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】在使用的时候再指定类型的一种特性。

原创内容，盗版必究。【原创不易，请尊重版权】

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【转载请注明来源】

通俗的解释，泛型是类型系统中的“参数”，【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。主要作用是为了类型的重用。从上面定义可以【原创内容，转载请注明出处】【未经授权禁止转载】看出，它只会用在函数、接口和类中。它和 未经授权，禁止复制转载。【版权所有，侵权必究】js 程序中的函数参数是两个层面的事物（【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】虽然意义是相同的），因为 typescr未经授权，禁止复制转载。未经授权，禁止复制转载。ipt 是静态类型系统，是在 js 进行【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。编译时进行类型检查的系统，因此，泛型这种原创内容，盗版必究。未经授权，禁止复制转载。参数，实际上是在编译过程中的运行时使用。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】之所以称它为“参数”，是因为它具备和函数【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。参数一模一样的特性。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

function increse(param) {
  // ...
}

而类型系统中，我们如此使用泛型：

【作者：唐霜】原创内容，盗版必究。

function increase<T>(param: T): T {
  //...
}

当 param 为一个类型时，T 被赋值著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】为这个类型，在返回值中，T 即为该类型从【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net而进行类型检查。

本文作者：唐霜，转载请注明出处。【作者：唐霜】【未经授权禁止转载】

编译系统

要知道 typescript 本身的类型【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】系统也需要编程，只不过它的编程方式很奇怪著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，你需要在它的程序代码中穿插 js 代码【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。（在 ts 代码中穿插 js 代码这个说【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】法很怪，因为我们直观的感觉是在 js 代转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net码中夹杂了 ts 代码）。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】

编程中，最重要的一种形式就是函数。在 t著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ypescript 的类型编程中，你看到本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。函数了吗？没有。这是因为，有泛型的地方就本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。有函数，只是函数的形式被 js 代码给割未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。裂了。typescript 需要进行编译【本文首发于唐霜的博客】【原创不易，请尊重版权】后得到最终产物。编译过程中要做两件事，一未经授权，禁止复制转载。【版权所有，侵权必究】是在内存中运行类型编程的代码，从而形成类【原创不易，请尊重版权】未经授权，禁止复制转载。型检查体系，也就是说，我们能够对 js 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】代码进行类型检查，首先是 typescr【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ipt 编译器运行 ts 编程代码后得到未经授权，禁止复制转载。【未经授权禁止转载】了一个运行时的检查系统，运行这个系统，从原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】而对穿插在其中的 js 代码进行类型断言【本文首发于唐霜的博客】原创内容，盗版必究。；二是输出 js，输出过程中，编译系统已【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net经运行完了类型编程的代码，就像 php 【原创内容，转载请注明出处】【未经授权禁止转载】代码中 echo js 代码一样，php著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】 代码已经运行了，显示出来的是 js 代【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】码。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】

从这个角度看 typescript，你或【未经授权禁止转载】【未经授权禁止转载】许更能理解为什么说它是 JavaScri著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】pt 的超集，为什么它的编译结果是 js转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】（为什么不可以将 ts 编译为其他语言呢？）。

【版权所有，侵权必究】【本文首发于唐霜的博客】

通俗的理解泛型

既然我们理解了 ts 编译系统的逻辑，那本文作者：唐霜，转载请注明出处。【未经授权禁止转载】么我们就可以把类型的编程和 js 本身的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。业务编程在情感上区分开。我们所讲的“泛型【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】”，只存在于类型编程的部分，这部分代码是【版权所有，侵权必究】【原创内容，转载请注明出处】 ts 的编译运行时代码。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【转载请注明来源】【原创内容，转载请注明出处】

我们来看下一个简单的例子：

转载请注明出处：www.tangshuang.net【转载请注明来源】

function increase<T>(param: T): T {
  //...
}

这段代码，如果我们把 js 代码区分开，【本文受版权保护】著作权归作者所有，禁止商业用途转载。然后用类型描述文本来表示会是怎样？

【版权所有，侵权必究】原创内容，盗版必究。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

// 声明函数 @type，参数为 T，返回结果为 (T): T 
@type = T => (T): T

// 运行函数得到一个类型 F，即类型为 (number): number
@F = @type(number)

// 要求 increase 这个函数符合 F 这种类型，也就是参数为 number，返回值也为 number 
@@F
function increase(param) { 
  // ... 
} 
@@end

实际上没有 @@F 这种语法，是我编造出【转载请注明来源】【关注微信公众号：wwwtangshuangnet】来的，目的是让你可以从另一个角度去看类型【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。系统。

【作者：唐霜】【原创内容，转载请注明出处】

当我们理解泛型是一种“参数”之后，我们可转载请注明出处：www.tangshuang.net【本文受版权保护】能会问：类型系统的函数在哪里？对于 js转载请注明出处：www.tangshuang.net【未经授权禁止转载】 函数而言，你可以很容易指出函数声明语句【未经授权禁止转载】转载请注明出处：www.tangshuang.net和参数，但是 ts 中，这个部分是隐藏起【版权所有，侵权必究】转载请注明出处：www.tangshuang.net来的。不过，我们可以在一些特定结构中，比【本文首发于唐霜的博客】未经授权，禁止复制转载。较容易看到类型函数的影子：

【转载请注明来源】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

// 声明一个泛型接口，这个写法，像极了声明一个函数，我们用描述语言来形容 @type = T => (T): T
interface GenericIdentityFn<T> {
    (arg: T): T;
}

// 这个写法，有点像一个闭包函数，在声明函数后，立即运行这个函数，描述语言：@@[T => (T): T](any)
function identity<T>(arg: T): T {
    return arg;
}

// 使用泛型接口，像极了调用一个函数，我们用描述语言来形容 @type(number)
let myIdentity: GenericIdentityFn<number> = identity;

上面这一整段代码，我们用描述文本重写一遍转载请注明出处：www.tangshuang.net【版权所有，侵权必究】：

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

@GenericIdentityFn = T => (T): T
@@[T => (T): T](any)
function identify(arg) {
  return arg
}
@@end

@@GenericIdentityFn(number)
let myIdentity = identity
@@end

我们在类型系统中声明了两个函数，分别是 【未经授权禁止转载】【未经授权禁止转载】@GenericIdentityFn 和未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。 @some（匿名函数 @[T =>未经授权，禁止复制转载。【原创内容，转载请注明出处】; (T): T]）。虽然是两个函数，但【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net是实际上，它们的是一模一样的，因为 ty【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。pescript 是结构类型，也就是在类【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】型检查的时候只判断结构上的每个节点类型是【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。否相同，而不是必须保持类型变量本身的指针【本文首发于唐霜的博客】原创内容，盗版必究。相同。@GenericIdentityF【原创不易，请尊重版权】【原创内容，转载请注明出处】n 和 @some 这两个函数分别被调用【原创不易，请尊重版权】原创内容，盗版必究。，用来修饰 identify 和 myI本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】dentify，在调用的时候，接收的参数【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net不同，所以导致最终的类型检查规则是不同的【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，identify 只要保证参数和返回值【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的类型相同，至于具体什么类型，any。而本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 myIdentify 除了保证参数返回转载请注明出处：www.tangshuang.net【转载请注明来源】值类型相同外，还要求类型必须是 numb【关注微信公众号：wwwtangshuangnet】【作者：唐霜】er。

本文作者：唐霜，转载请注明出处。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

泛型类

除了泛型接口，class 类也可以泛型化【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，即“泛型类”，借助泛型类，我们来探究一原创内容，盗版必究。【转载请注明来源】下泛型的声明和使用的步骤。

【转载请注明来源】未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();

前文泛型接口因为只是为了约束函数的类型，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。所以写的很像函数，实际上，我们可以用描述【转载请注明来源】【作者：唐霜】语言重新描述一个泛型接口和泛型类。上面的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】红色部分，我们用描述语言来描述：

【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

@GenericNumber = T => class {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

@GenericNumber 这个函数，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。以 T 为参数，返回一个 class，在转载请注明出处：www.tangshuang.net【作者：唐霜】函数体内多次用到了参数 T。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

@GenericIdentityFn = T => interface { 
  (arg: T): T; 
}

我们重新描述了前面的 interface【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net GenericIdentityFn，这【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net样我们就可以在接口中增加其他的方法。

【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】

可以注意到，即使 typescript 【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】内置的基础类型，例如 Array，被声明原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net为泛型接口、泛型类之后，这些接口和类在使本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。用时必须通过<>传入参数，本【原创不易，请尊重版权】未经授权，禁止复制转载。质上，因为它们都是函数，只是返回值不同。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

其他泛型使用的通俗解释

接下来我们要再描述一个复杂的类型：

未经授权，禁止复制转载。【未经授权禁止转载】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

class Animal {
    numLegs: number;
}

function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}

我们姑且不去看 new() 的部分，我们原创内容，盗版必究。未经授权，禁止复制转载。看尖括号中的 extends 语法，这里本文作者：唐霜，转载请注明出处。【作者：唐霜】应该怎么理解呢？实际上，我们面对的问题是转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，在编译时，<A extends Animal> 尖括号中的内容是什么时候运行的【作者：唐霜】原创内容，盗版必究。，是之前，还是之间？

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

// 到底是
@type = (A extends Animal) => (new() => A): A
@type(T)
// 还是
@type = A => (new() => A): A
@type(T extends Animal)

因为 typescript 是静态类型系【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】统，Animal 是不变的类，因此，可以本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】推测其实在类的创建之前，尖括号的内容已经【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】被运行了。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

@type = (A extends Animal) => (new() => A): A

也就是说，要使用 @type(T) 产生本文版权归作者所有，未经授权不得转载。【作者：唐霜】类型，首先 T 要满足 Animal 的【作者：唐霜】【未经授权禁止转载】结构，然后才能得到需要的类型，如果 T 【转载请注明来源】【关注微信公众号：wwwtangshuangnet】已经不满足 Animal 类的结构了，那【转载请注明来源】【作者：唐霜】么编译器会直接报错，而这个报错，不是类型转载请注明出处：www.tangshuang.net原创内容，盗版必究。检查阶段，而是在类型系统的创建阶段，也就【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】是 ts 代码的运行阶段。这种情况被称为【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】“泛型约束”。

【原创不易，请尊重版权】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

另外，类似 <A,B> 这样著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】的语法其实和函数参数一致。

本文作者：唐霜，转载请注明出处。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

@type = (A, B) => (A|B): SomeType

我们再来看 ts 内置的基础类型：Arr转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ay<number>

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【转载请注明来源】

@Array = any => any[]

结语

Typescript 中的泛型，实际上就【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】是类型的生成函数的参数。本文的内容全部为转载请注明出处：www.tangshuang.net原创内容，盗版必究。凭空想象，仅适用于对 ts 进行理解时的【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】思路开拓，不适用于真实编程，特此声明。

【本文受版权保护】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net

2019-12-04 5465 TypeScript, 类型检查