15 | 类型编程：如何打造属于自己的工具类型？

14 讲我们学习了常见 TypeScript 官方内置的工具类型（官方轮子），它们的本质就是自定义的复杂类型构造器（确切地讲是泛型）。这一讲我们就来学习一下如何自己造轮子，并剖析一些常见第三方轮子的实现。

类型物料

在正式造轮子之前，我们先来熟悉一下即将用到的物料，这可能涉及前面每一讲中的知识点和一些新语法。如果你连泛型特性都记不清的话，那么请至少从 10 讲开始温习一遍。

言归正传，接下来我们一起看看重度依赖的一些类型物料。

泛型

首先是泛型（回顾 10 讲），笔者认为工具类型的本质就是构造复杂类型的泛型。如果一个工具类型不能接受类型入参，那么它和普通的类型别名又有什么区别？因此，使用泛型进行变量抽离、逻辑封装其实就是在造类型的轮子，下面举一个具体的示例：

type isXX = 1 extends number ? true : false;

type isYY = ‘string’ extends string ? true : false;

在示例中的第 1~2 行，我们重复使用了 extends 关键字和三元运算符实现根据类型 1 和 number、’string’ 和 string 的子类型关系分别返回布尔字面量 true 或者 false，并给类型起了别名 isXX、isYY，这明显是一种效率低下的做法，因为我们不能把其中的逻辑复用在对其他类型子类型关系的判断上。这时，我们就需要把确切的类型抽离为入参，然后封装成一个可复用的泛型。

下面一起看一个具体的示例：

type isSubTying = Child extends Par ? true : false;

type isXX2 = isSubTyping<1, number>; // true

type isYY2 = isSubTyping<’string’, string>; // true

type isZZ2 = isSubTyping; // true

示例中的第 1 行封装出来的工具泛型其实是我们在 12 讲中使用到的工具类型 isSubTyping，如果类型入参 Child 是 Par 的子类型，则返回布尔字面量类型 true，否则返回 false。这样，我们就可以使用 isSubTyping 判断其他任意两个类型之间的子类型关系了。

比如示例中的第 2~4 行，因为 1 和 number、’string’ 和 string、true 和 boolean 都是子类型和父类型的关系，所以返回的都是布尔字面量类型 true。

条件类型

如我们在泛型中提到，TypeScript 支持使用三元运算的条件类型，它可以根据 ？前面的条件判断返回不同的类型。同时，三元运算还支持嵌套。

在三元运算的条件判断逻辑中，它主要使用 extends 关键字判断两个类型的子类型关系，如下代码所示：

type isSubTyping = Child extends Par ? true : false;

type isAssertable = T extends S ? true : S extends T ? true : false;

type isNumAssertable = isAssertable<1, number>; // true

type isStrAssertable = isAssertable; // true

type isNotAssertable = isAssertable<1, boolean>; // false

以上示例，除了在第 1 行定义了 isSubTyping 之外，我们还在第 2 行定义了使用嵌套的三元运算，用来判断类型入参 T 是否可以被断言成类型 S（T as S）的泛型 isAssertable，并使用 extends 关键字判断入参 T 是否是 S 的子类型或 S 是 T 的子类型，从而判断它们之间的可断言关系。

在示例中的第 3~5 行，因为 1 是 number 类型的子类型，满足条件分支 T extends S，所以返回了 true；因为字符串字面量 ‘string’ 是 string 类型的子类型，满足条件分支 S extends T，所以返回了 true；因为 1 既不是 boolean 的子类型，也不是父类型，不满足任何条件分支，所以返回了 false。

下面我们一起来看看条件类型的另外一个特性：分配条件类型。

分配条件类型（Distributive Conditional Types）

如我们在 10 讲中提到，在条件类型中，如果入参是联合类型，则会被拆解为一个个独立的（原子）类型（成员），然后再进行类型运算。

下面我们看一个具体的示例：

type BooleanOrString = string | boolean;

type StringOrNumberArray = E extends string | number ? E[] : E;

type WhatIsThis = StringOrNumberArray; // boolean | string[]

type BooleanOrStringGot = BooleanOrString extends string | number ? BooleanOrString[] : BooleanOrString; // string | boolean

在示例中的第 3 行， string 和 boolean 组成的联合类型 BooleanOrString 作为泛型 StringOrNumberArray 入参的时候，则会被拆解成 string 和 boolean 这两个独立的类型，再通过 extends 关键字判断是否是 string | number 类型的子类型。

因为 string 是子集，而 boolean 不是，所以最终我们得到的 WhatIsThis 的类型是 boolean | string[]**。**但是，在非泛型条件类型中（示例中的第 4 行），因为 BooleanOrString 被当成了一个整体对待，所以 BooleanOrStringGot 的类型是 string | boolean。

同样，通过某些手段强制类型入参被当成一个整体，也可以解除类型分配，如下示例：

type StringOrNumberArray = [E] extends [string | number] ? E[] : E;

type WhatIsThis = StringOrNumberArray; // string | boolean

在示例中的第 1 行，我们使用 [] 将入参 E 包起来，即便入参是联合类型 string | boolean，也会被当成一个整体对待，所以第 2 行返回的是 string | boolean。

注意：包含条件类型的泛型接收 never 作为泛型入参时，存在一定“陷阱”，如下示例：

type GetSNums = never extends number ? number[] : never extends string ? string[] : never; // number[];

type GetNever = StringOrNumberArray; // never

在上述示例中的第 1 行，因为 never 是所有类型的子类型，自然也是 number 的子类型，所以返回的是 number 类型的数组；在第 2 行传入 never 作为入参来实例化前面定义的泛型 StringOrNumberArray 时，返回的类型却是 never，而不是 number[]。

你要知道，泛型 StringOrNumberArray 的实现与示例第 1 行“=”右侧的逻辑并没有任何区别（除 never 被抽离成入参之外）。这是因为 never 是不能分配的底层类型，**如果作为入参以原子形式出现在条件判断 extends 关键字左侧，则实例化得到的类型也是 never**。

下面看一个具体的示例：

type UsefulNeverX = T extends {} ? T[] : [];

type UselessNeverX = S extends {} ? S[] : [];

type UselessNeverY = S extends {} ? T[] : [];

type UselessNeverZ = [T] extends [{}] ? T[] : [];

type ThisIsNeverX = UsefulNeverX; // never

type ThisIsNotNeverX = UselessNeverX; // string[]

type ThisIsNotNeverY = UselessNeverY; // never[]

type ThisIsNotNeverZ = UselessNeverZ; // never[]

在示例中的第 1 行，因为我们定义的泛型 UsefulNeverX 的入参 T 被三元运算中的 extends 使用，所以第 5 行返回的类型是 never。而第 2 行、第 3 行定义的泛型入参 T 都没有被三元运算中的 extends 使用，所以第 6~7 行所返回的类型分别是 string[] 和 never[]。在第 4 行，因为入参 T 是以 T[] 而不是以原子形式被 extends 使用，所以第 8 行返回的类型也是 **never[]**。

条件类型中的类型推断 infer

另外，我们可以在条件类型中使用类型推断操作符 infer 来获取类型入参的组成部分，比如说获取数组类型入参里元素的类型。

下面我们来看一个具体的示例：

{

type ElementTypeOfArray = T extends (infer E)[] ? E : never;

type isNumber = ElementTypeOfArray; // number

type isNever = ElementTypeOfArray; // never

}

在示例中的第 1 行，我们定义了接收入参 T 的泛型 ElementTypeOfArray，并在三元运算的条件判断中，通过 (infer E)[] 定义了一个有对元素类型推断参数 E 的数组。当入参 T 满足是 (infer E)[] 数组类型的子类型的条件，则返回参数 E，即数组元素类型，所以在第 3 行传入 number[] 入参时返回的是 number 类型，而传入 number 时返回的则是 never。

我们还可以通过 infer 创建任意个类型推断参数，以此获取任意的成员类型，如下示例：

{

type ElementTypeOfObj = T extends { name: infer E; id: infer I } ? [E, I] : never;

type isArray = ElementTypeOfObj<{ name: ‘name’; id: 1; age: 30 }>; // [‘name’, 1]

type isNever = ElementTypeOfObj; // never

}

在示例中的第 1 行，我们定义了入参是 T 的泛型 ElementTypeOfObj，并通过两个 infer 类型推断来获取入参 name、id 属性的类型。在第 3 行，因为入参是包含 name、id 属性的接口类型，所以提取到了元组类型 [‘name’, 1]。而在第 4 行，因为入参 number 不满足三元运算中的条件判断，所以返回了 never。

索引访问类型

索引访问类型其实更像是获取物料的方式，首先我们可以通过属性名、索引、索引签名按需提取对象（接口类型）任意成员的类型（注意：只能使用 [索引名] 的语法），如下示例。

interface MixedObject {

 复制代码
animal: {
  type: 'animal' | 'dog' | 'cat';
  age: number;
};
[name: number]: {
  type: string;
  age: number;
  nickname: string;
};
[name: string]: {
  type: string;
  age: number;
};

}

type animal = MixedObject[‘animal’];

type animalType = MixedObject[‘animal’][‘type’];

type numberIndex = MixedObject[number];

type numberIndex0 = MixedObject[0];

type stringIndex = MixedObject[string];

type stringIndex0 = MixedObject[‘string’];

在示例的第 16 行，我们通过 ‘animal’ 索引获取了 MixedObject 接口的 animal 属性的类型。在第 17 行，我们通过多级属性索引获取了更深层级 type 属性的类型。

然后，在第 18 行、第 19 行，我们通过 number 类型索引签名和数字索引 0 获取了第 6~10 行定义的同一个接口类型。

最后，在第 20 行、第 21 行，我们通过 string 类型索引签名和字符串字面量索引 ‘string’ 获取了第 11~14 行定义的同一个接口类型（回顾 7 讲）。

keyof

其次，我们还可以使用 keyof 关键字提取对象属性名、索引名、索引签名的类型，如下示例：

type MixedObjectKeys = keyof MixedObject; // string | number

type animalKeys = keyof animal; // ‘type’ | ‘age’

type numberIndexKeys = keyof numberIndex; // “type” | “age” | “nickname”

在示例中的第 1 行，我们使用 keyof 提取了 MixedObject 接口的属性和索引签名，它是由 string、number 和 ‘animal’ 类型组成的联合类型，缩减之后就是 string | number 联合类型。在第 2 行，我们提取了 ‘type’ 和 ‘age’ 字符串字面量类型组成的联合类型。在第 3 行，我们提取了 ‘type’、’age’ 和 ‘nickname’ 组成的联合类型。

typeof

最后介绍的操作符物料是 typeof。

如果我们在表达式上下文中使用 typeof，则是用来获取表达式值的类型，如果在类型上下文中使用，则是用来获取变量或者属性的类型。当然，在 TypeScript 中，typeof 的主要用途是在类型上下文中获取变量或者属性的类型，下面我们通过一个具体示例来理解一下。

{

let StrA = ‘a’;

const unions = typeof StrA; // unions 类型是 “string” | “number” | “bigint” | “boolean” | “symbol” | “undefined” | “object” | “function”

const str: typeof StrA = ‘string’; // strs 类型是 string

type DerivedFromStrA = typeof StrA; // string

}

在示例中的第 3 行，typeof 作用在表达式上下文中，获取的是 StrA 值的类型，因为与静态类型上下文无关，所以变量 unions 的类型是 ‘string’、’number’ 等字符串字面量组成的联合类型。

而在第 4 行，typeof 作用在类型上下文中，提取的是变量 StrA 的类型，因为第 1 行推断出来 StrA 的类型是 string，所以提取的类型、变量 str 的类型也是 string。

当然，我们也可以使用一个类型别名专门接收从变量 StrA 提取的类型，比如示例中的第 5 行，类型别名 DerivedFromStrA 的类型是 string。

对于任何未显式添加类型注解或值与类型注解一体（**比如函数、类）的变量或属性**，我们都可以使用 typeof 提取它们的类型，这是一个十分方便、有用的设计，如下示例：

const animal = {

 复制代码
id: 1,
name: 'animal'

};

type Animal = typeof animal;

const animalFun = () => animal;

type AnimalFun = typeof animalFun;

在示例中的第 5 行、第 7 行，我们使用 typeof 提取了对象 animal 和函数 animaFun 的类型。

映射类型

我们可以使用索引签名语法和 in 关键字限定对象属性的范围，如下示例：

type SpecifiedKeys = ‘id’ | ‘name’;

type TargetType = {

 复制代码
**[key in SpecifiedKeys]: any;**

}; // { id: any; name: any; }

type TargetGeneric = {

 复制代码
[key in O]: any;

}

type TargetInstance = TargetGeneric; // { id: any; name: any; }

在示例中的第 1 行，我们定义了联合类型 SpecifiedKeys，并在第 3 行、第 6 行使用 in 限定了 AnimalNormal 对象和泛型 AnimalGeneric 的属性必须是 SpecifiedKeys 的成员，所以最终第 2 行、第 8 行得到的类型都是 { id: any; name: any; }。

注意：我们**只能在类型别名定义中使用 in，**如果在接口中使用，则会提示一个 ts(1169) 的错误，如下示例第 2 行所示。

interface ITargetInterface {

 复制代码
[key in SpecifiedKeys]: any; // ts(1169)

}

在定义类型时，我们可以组合使用 in 和 keyof，并基于已有的类型创建一个新类型，使得新类型与已有类型保持一致的只读、可选特性，这样的泛型被称之为映射类型。

注意：in 和 keyof 也只能在类型别名定义中组合使用。

下面我们看一个具体的示例：

interface SourceInterface {

 复制代码
readonly id: number;
name?: string;

}

type TargetType = {

 复制代码
[key in keyof SourceInterface]: SourceInterface[key];

}; // { readonly id: number; name?: string | undefined }

type TargetGenericType = {

 复制代码
[key in keyof S]: S[key];

 复制代码
readonly [key in keyof S]: S[key];

 复制代码
[key in keyof S]?: S[key];

 复制代码
-readonly [key in keyof S]: S[key];

 复制代码
[key in keyof S]-?: S[key];

 复制代码
[key in keyof S **as Exclude<key, 'id'>**]: S[key];

 复制代码
[key in keyof A | keyof B]: key extends keyof A
  ? key extends keyof B
    ? A[key] | B[key]
    : A[key]
  : key extends keyof B
  ? B[key]
  : never;

 复制代码
? IsAny<T> extends true
  ? true
  : false
: IsAny<T> extends true
? false
: [S] extends [T]
? [T] extends [S]
  ? true
  : false
: false;