对于从 JavaScript 转来的 TypeScript 的初学者来说，一开始无脑用一个新的 interface规定一切的方式确实很过瘾。但是，当不得不尝试提高函数或组件的通用性时，使用泛型成了必须的选择。
当尝试阅读一些用 TypeScript 开发的库的源码时，可能会被各种尖括号包裹的复杂泛型运算搞的晕头转向。本文的目的在于对泛型中的常见关键词和用法进行介绍，并且尝试用一定数量的例子来方便理解泛型。
在 TypeScript中， type和 interface关键字中在多数情况下功能是相同的，因此在本文的例子中不会刻意进行区分。首先定义下面一个类型，便于后面的使用。
type User = {
name: string;
age: number;
};关键字
keyof 关键字
keyof的功能较为简单，对于一个 object 类型，得到这个类型的所有属性名构成的联合类型。
type TA = keyof User;
// 'name' | 'age'在这个例子中，我们得到一个新的类型 TA，这个类型的实例必须为 'name''age'这两个字符串之一，这样的单一字符串也是一种类型，属于字面量类型。
typeof 关键字
typeof是针对某一个类型的实例来讲的，我们将得到这个实例的类型。
const fn = () => ({ name: "blasius", age: 18 });
type TB = typeof fn;
// () => {name: string, age: number}这里的类型 TB，是一个新的类型，写作 ()=>{name:string,age:number}，这是一个函数类型。这个类型的函数的返回值是一个新的类型，写作 {name:string,age:number}，然而，这个类型暂时还没有特定的名称。假如我们想把这个返回值的类型提取出来，可以使用 ReturnType这个工具类型，本文后面会具体介绍。
extends 关键字
extends关键字在类型运算中的作用，不是继承或者扩展，而是判断一个类型是否可以被赋值给另一个类型。如上面的类型 TB，是一个函数，因此这个类型是可以赋值给类型 Function。
extends有时被用来进行类型约束。考虑下面的例子：
function logLength<T>(arg: T) {
console.log(arg.length);
// Property 'length' does not exist on type 'T'.
}此时我们无法保证类型 T一定包含 length这个属性，因此会出现错误。考虑进行如下修改：
// 定义一个类型ILengthy
interface ILengthy {
length: number;
}
function logLength2<T extends ILengthy>(arg: T) {
console.log(arg.length);
}对于函数 logLength2来说，我们规定了类型 T必须是 ILengthy可赋值的类型，也就是说， T必须包含类型为 number的属性 length，这样一来，我们成功对函数的参数进行了约束。
extends的另一种用法，是在类型运算中进行条件运算，具体用法将会在后面的工具类型中进行介绍。
infer 关键字
infer一般用于类型提取，其作用类似于在类型运算的过程中声明了一个变量。考虑下面的例子：
type UserPromise = Promise<User>;这个类型表示一个返回值类型为 User的 Promise类型。我们想把 User这个类型从这个已知的函数中提取出来，应当使用 infer关键字：
type UnPromisify<T> = T extends Promise<infer V> ? V : never;
type InferedUser = UnPromisify<UserPromise>;
// { name: number; age: string; }考虑这个例子中的 UnPromisify类型，这个类型接受一个泛型 T。接下来通过 extends关键字进行判断，如果 T的类型形如 Promise<V>，那么就把这个 V提取出来。为了更好的理解 infer的作用，在这个例子中，可以认为 infer声明了一个变量 V。这个例子，我们结合 extedns和 infer实现了类型提取。
工具类型
所谓工具类型，形如 typeToolType<T,....>=R。为了便于理解我们可以将其看做是用 type关键字定义的一个封装好的针对类型的“函数”。传给工具类型的，被包裹在尖括号之内的泛型 T，就是函数的参数。等号右边的，就是这个“函数”的返回值。
有了所谓”函数“，也必须有”变量“。对于初学者来说，对于泛型感到不理解的主要困境在于：没有区分什么时候是类型的”函数“，什么时候是类型的”变量“。
上面提到的 UnPromisify<T>，就是这样一个类型的”函数“，因为尖括号中的 T是不确定的，因此称为泛型。相对的，上面提到的 UnPromisify<UserPromise>，则是这个“函数”的执行结果，可以理解为类型的”变量“，因为尖括号中的 UserPromise是一个确定的类型， {name:number;age:string;}就是这个具体的结果的值。
下面介绍几个常用的工具类型，这几个“函数”已经作为标准存在于 TypeScript中，分析这几个“函数”的具体实现，有利于我们更好地理解泛型。
Partial<T>、Required<T>、Readonly<T>、Mutable<T>
Partial<T>这个类型“函数”的作用，在于给定一个输入的 object 类型 T，返回一个新的 object 类型，这个 object 类型的每一个属性都是可选的。
我们可以用基本的关键字来用自己的方式实现这个工具类型：
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
type PartialUser = MyPartial<User>;
// {name?: string, age?: number}
type TUserKeys = keyof User;
// 'name' | 'age'
type TName = User["name"];
// string
type TAge = User["age"];
// number
type TUserValue = User[TUserKeys];
// string | number上面的例子中， MyPartial<T>是工具类型本身， PartialUser是 MyPartial<T>传入了"参数" User经过运算后的结果，因此是工具类型使用的实例。下面我们来逐步理解这个例子:
keyof T代表类型T的所有键构成的联合类型，等同于TUserKeysKinkeyof T代表K必须是这个联合类型中的一个- 有了具体的键，参考
TName和TAge的结果，就可以用T[K]取出这个键对应的值的类型 - 至于中括号，这是
TypeScript中的索引签名的类型 综上，MyPartial<T>这个"函数"的”返回“值是一个新的 object 类型，这个类型的键和键的类型都和”输入参数“T相同且一一对应，只不过每个键的后面都多了一个问号?用来表示这个键可选罢了。
如果能理解 Partial<T>的实现，那么 Required<T>、 Readonly<T>和 Mutable<T>的实现都是类似的。都是只不过是把 ?换成了 readonly或者 -用来表示不同的含义罢了。下面是这些工具类型的具体实现：
type MyRequired<T> = {
[K in keyof T]-?: T[K];
};
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};
type MyMutable<T> = {
-readonly [K in keyof T]: T[K];
};Requiered<T>表示根据 T得到新的类型，这个类型的每个键值都为必需。Readonly<T>表示由 T得到新的类型，这个类型的每个键的值都为只读的。Mutable<T>表示同样由 T得到新的类型，这个类型的每个键的值为可写的。
Record<K, T>、Pick<T, K>
工具类型 Record<K,T>的实现：
type MyRecord<K extends keyof any, T> = {
[P in K]: T;
};
type TKeyofAny = keyof any;
// string | number | symbol
type TKeys = "a" | "b" | 0;
type TKeysUser = MyRecord<TKeys, User>;
// {a: User, b: User, 0: User}Record<K,T>接受两个类型作为”参数“，其中第一个参数 K是一个任意字符串、数字或 Symbol 的联合类型，第二个“参数” T可以为任意类型。最终得到一个由 K中每个值作为键，值类型为 T的新的 object 类型。
类似的， Pick<T,K>的实现：
type MyPick<T, K extends keyof T> = {
[P in K]: T[P];
};
type TNameKey = "name";
type TUserName = MyPick<User, TNameKey>;
// {name: string}Pick的功能很简单，从给定的类型 T中 pick 出特定的键和键类型，构成新的类型，另一个”参数“ K类型必须是 keyof T中的若干项构成的联合类型。
ExcludePick<T, U>、Extract<T, U>、NonNullable<T>
这三个工具类型的实现是类似的，都使用了 extends的基本用法来对联合类型进行条件性的选取, 已 Exclude<T,U>为例，若 T能够赋值给 U，则返回 never，否则返回 T本身，因此最终得到联合类型中存在于 T中但不存在于 U中的项：
type MyExclude<T, U> = T extends U ? never : T;
type MyExtract<T, U> = T extends U ? T : never;
type MyNonNullable<T> = T extends null | undefined ? never : T;Exclude<T,U>和 Extract<T,U>通常是针对联合类型来使用的，两者的逻辑恰好相反。例如：
type TC = "a" | "b" | "c";
type TD = "a" | "c" | "e";
type TE = MyExclude<TC, TD>;
// 'b'
type TF = MyExtract<TC, TD>;
// 'a' | 'c'Omit<T, K>
这个类型“函数”接受两个“参数” T和 K，功能和 Pick<T,K>恰好相反，即从给定的类型 T中排除（exclude）掉特定的键和键类型，得到新的类型。因此，可以用 Pick配合 Exclude来实现。
type MyOmit<T, K> = Pick<T, Exclude<keyof T, K>>;
type OmitUser = MyOmit<User, "age">;
// { name: string }思考 OmitUser的运算过程：
1、得到 keyofUser为 'name'|'age' 2、从 'name'|'age'中排除掉 'age'，得到剩下的 'name' 3、 Pick<User,'name'>，得到剩下的 name，成为一个新的类型
芜湖，一切都很顺理成章。
当不希望使用已有的 Pick<T,K>工具类型时， Omit<T,K>还可以有另一种实现方式，观察其结构，可以发现 Pick<T,K>的影子。
type MyOmit2<T, K> = {
[P in MyExclude<keyof T, K>]: T[P];
};构造函数类型和 InstanceType<T>
形如 new(args:any)=>any类型的函数，被称为构造函数类型。
下面的工具类型 InstanceType，用于取得构造函数的返回的实例的类型。
type MyInstanceType<T extends new (...args: any) => any> = T extends new (
...args: any
) => infer R
? R
: any;乍一看这个表达式十分复杂，但是主体结构仅仅是一个前面见过的 extends表达式而已:
图中红色放方框中代表构造函数类型。绿色方框中用 infer关键字声明了一个新的“类型变量” R，若 T为构造函数类型，则可以得到该函数的返回实例的类型。
ReturnType<T>、Parameters<T>
ReturnType工具类型用于提取泛型 T的返回值。Parameters工具类型用于提取泛型 T的参数。
type MyReturnType<T extends (...args: any) => any> = T extends (
...args: any
) => infer R
? R
: never;
type MyParameters<T extends (...args: any) => any> = T extends (
...args: infer P
) => any
? P
: never;为了理解这两个工具类型的实现，只需同样要把握住 infer的位置和匿名的函数类型 (...args:any)=>any这两个要点即可。
总结
从上面的例子可以看出，所谓泛型，完全可以理解成一个类型的”函数“，把握住尖括号中的输入参数，注意观察等号右边的”函数返回值“。值得注意的是，尖括号中的内容，如果是形如 T、 K这样的，那么就是“函数”本身，如果尖括号内是一个确定的类型，那么就成了“函数”的执行结果。
一些常用的用 TypeScript写成的包如 Redux 的源码中，充斥着众多的泛型定义。对于用 JavaScript写成的包如 React，在使用时必须同时安装的包 @types/react，其主要内容也是大量的类型和泛型定义，了解泛型不但有助于理解这些包的用法，这些包的源码结构也可以一目了然。这些，就是理解泛型运算的意义之所在。
