Ts高手篇：22个示例深刻讲解Ts最晦涩难懂的高级类型工具

时间  2021-08-12
标签 html git github typescript 编程 api 数组 安全 微信 markdown 栏目 HTML 繁體版
原文   原文链接

Hello你们好，我是愣锤。随着Typescript不可阻挡的趋势，相信小伙伴们或多或少的使用过Ts开发了。而Ts的使用除了基本的类型定义外，对于Ts的泛型、内置高级类型、自定义高级类型工具等会相对陌生。本文将会经过22个类型工具例子，深刻讲解Ts类型工具原理和编程技巧。不扯闲篇，全程干货，内容很是多，想提高Ts功力的小伙伴请耐心读下去。相信小伙伴们在读完此文后，可以对这块有更深刻的理解。下面，咱们开始吧～html

本文基本分为三部分：git

  • 第一部分讲解一些基本的关键词的特性（好比索引查询、索引访问、映射、extends等），可是该部分更多的讲解小伙伴们不清晰的一些特性，而基本功能则再也不赘述。更多的关键词及技巧将包含在后续的例子演示中再具体讲述；
  • 第二部分讲解Ts内置的类型工具以及实现原理，好比Pick、Omit等；
  • 第三部分讲解自定义的工具类型，该部分也是最难的部分，将经过一些复杂的类型工具示例进行逐步剖析，对于其中的晦涩的地方以及涉及的知识点逐步讲解。此部分也会包含大量Ts类型工具的编程技巧，也但愿经过此部分的讲解，小伙伴的Ts功底能够进一步提高！

第一部分 前置内容

  • keyof 索引查询

对应任何类型T,keyof T的结果为该类型上全部共有属性key的联合：github

interface Eg1 {
  name: string,
  readonly age: number,
}
// T1的类型实则是name | age
type T1 = keyof Eg1

class Eg2 {
  private name: string;
  public readonly age: number;
  protected home: string;
}
// T2实则被约束为 age
// 而name和home不是公有属性，因此不能被keyof获取到
type T2 = keyof Eg2
复制代码
  • T[K] 索引访问
interface Eg1 {
  name: string,
  readonly age: number,
}
// string
type V1 = Eg1['name']
// string | number
type V2 = Eg1['name' | 'age']
// any
type V2 = Eg1['name' | 'age2222']
// string | number
type V3 = Eg1[keyof Eg1]
复制代码

T[keyof T]的方式，能够获取到T全部key的类型组成的联合类型； T[keyof K]的方式，获取到的是T中的key且同时存在于K时的类型组成的联合类型； 注意：若是[]中的key有不存在T中的，则是any；由于ts也不知道该key最终是什么类型，因此是any；且也会报错；typescript

  • & 交叉类型注意点

交叉类型取的多个类型的并集，可是若是相同key可是类型不一样，则该key为never。编程

interface Eg1 {
  name: string,
  age: number,
}

interface Eg2 {
  color: string,
  age: string,
}

/** * T的类型为 {name: string; age: number; age: never} * 注意，age由于Eg1和Eg2中的类型不一致，因此交叉后age的类型是never */
type T = Eg1 & Eg2
// 可经过以下示例验证
const val: T = {
  name: '',
  color: '',
  age: (function a() {
    throw Error()
  })(),
}
复制代码

extends关键词特性（重点）

  • 用于接口，表示继承
interface T1 {
  name: string,
}

interface T2 {
  sex: number,
}

/** * @example * T3 = {name: string, sex: number, age: number} */
interface T3 extends T1, T2 {
  age: number,
}
复制代码

注意，接口支持多重继承，语法为逗号隔开。若是是type实现继承，则可使用交叉类型type A = B & C & D。api

  • 表示条件类型，可用于条件判断

表示条件判断，若是前面的条件知足，则返回问号后的第一个参数，不然第二个。相似于js的三元运算。数组

/** * @example * type A1 = 1 */
type A1 = 'x' extends 'x' ? 1 : 2;

/** * @example * type A2 = 2 */
type A2 = 'x' | 'y' extends 'x' ? 1 : 2;

/** * @example * type A3 = 1 | 2 */
type P<T> = T extends 'x' ? 1 : 2;
type A3 = P<'x' | 'y'>
复制代码

提问：为何A2和A3的值不同？安全

  • 若是用于简单的条件判断，则是直接判断前面的类型是否可分配给后面的类型
  • 若extends前面的类型是泛型，且泛型传入的是联合类型时，则会依次判断该联合类型的全部子类型是否可分配给extends后面的类型（是一个分发的过程）。

总结，就是extends前面的参数为联合类型时则会分解（依次遍历全部的子类型进行条件判断）联合类型进行判断。而后将最终的结果组成新的联合类型。微信

  • 阻止extends关键词对于联合类型的分发特性

若是不想被分解（分发），作法也很简单，能够经过简单的元组类型包裹如下：markdown

type P<T> = [T] extends ['x'] ? 1 : 2;
/** * type A4 = 2; */
type A4 = P<'x' | 'y'>
复制代码

条件类型的分布式特性文档

类型兼容性

集合论中，若是一个集合的全部元素在集合B中都存在，则A是B的子集；

类型系统中，若是一个类型的属性更具体，则该类型是子类型。（由于属性更少则说明该类型约束的更宽泛，是父类型）

所以，咱们能够得出基本的结论：子类型比父类型更加具体,父类型比子类型更宽泛。 下面咱们也将基于类型的可复制性（可分配性）、协变、逆变、双向协变等进行进一步的讲解。

  • 可赋值性
interface Animal {
  name: string;
}

interface Dog extends Animal {
  break(): void;
}

let a: Animal;
let b: Dog;

// 能够赋值，子类型更佳具体，能够赋值给更佳宽泛的父类型
a = b;
// 反过来不行
b = a;
复制代码
  • 可赋值性在联合类型中的特性
type A = 1 | 2 | 3;
type B = 2 | 3;
let a: A;
let b: B;

// 不可赋值
b = a;
// 能够赋值
a = b;
复制代码

是否是A的类型更多，A就是子类型呢？偏偏相反，A此处类型更多可是其表达的类型更宽泛，因此A是父类型，B是子类型。

所以b = a不成立（父类型不能赋值给子类型），而a = b成立（子类型能够赋值给父类型）。

  • 协变
interface Animal {
  name: string;
}

interface Dog extends Animal {
  break(): void;
}

let Eg1: Animal;
let Eg2: Dog;
// 兼容，能够赋值
Eg1 = Eg2;

let Eg3: Array<Animal>
let Eg4: Array<Dog>
// 兼容，能够赋值
Eg3 = Eg4
复制代码

经过Eg3和Eg4来看，在Animal和Dog在变成数组后，Array<Dog>依旧能够赋值给Array<Animal>，所以对于type MakeArray = Array<any>来讲就是协变的。

最后引用维基百科中的定义：

协变与逆变(Covariance and contravariance )是在计算机科学中，描述具备父/子型别关系的多个型别经过型别构造器、构造出的多个复杂型别之间是否有父/子型别关系的用语。

简单说就是，具备父子关系的多个类型，在经过某种构造关系构形成的新的类型，若是还具备父子关系则是协变的，而关系逆转了（子变父，父变子）就是逆变的。可能听起来有些抽象，下面咱们将用更具体的例子进行演示说明：

  • 逆变
interface Animal {
  name: string;
}

interface Dog extends Animal {
  break(): void;
}

type AnimalFn = (arg: Animal) => void
type DogFn = (arg: Dog) => void

let Eg1: AnimalFn;
let Eg2: DogFn;
// 再也不能够赋值了，
// AnimalFn = DogFn不能够赋值了, Animal = Dog是能够的
Eg1 = Eg2;
// 反过来能够
Eg2 = Eg1;
复制代码

理论上，Animal = Dog是类型安全的，那么AnimalFn = DogFn也应该类型安全才对，为何Ts认为不安全呢？看下面的例子：

let animal: AnimalFn = (arg: Animal) => {}
let dog: DogFn = (arg: Dog) => {
  arg.break();
}

// 假设类型安全能够赋值
animal = dog;
// 那么animal在调用时约束的参数，缺乏dog所需的参数，此时会致使错误
animal({name: 'cat'});
复制代码

从这个例子看到，若是dog函数赋值给animal函数，那么animal函数在调用时，约束的是参数必需要为Animal类型（而不是Dog），可是animal实际为dog的调用，此时就会出现错误。

所以，Animal和Dog在进行type Fn<T> = (arg: T) => void构造器构造后，父子关系逆转了，此时成为“逆变”。

  • 双向协变

Ts在函数参数的比较中实际上默认采起的策略是双向协变：只有当源函数参数可以赋值给目标函数或者反过来时才能赋值成功。

这是不稳定的，由于调用者可能传入了一个具备更精确类型信息的函数，可是调用这个传入的函数的时候却使用了不是那么精确的类型信息（典型的就是上述的逆变）。 可是实际上，这极少会发生错误，而且可以实现不少JavaScript里的常见模式：

// lib.dom.d.ts中EventListener的接口定义
interface EventListener {
  (evt: Event): void;
}
// 简化后的Event
interface Event {
  readonly target: EventTarget | null;
  preventDefault(): void;
}
// 简化合并后的MouseEvent
interface MouseEvent extends Event {
  readonly x: number;
  readonly y: number;
}

// 简化后的Window接口
interface Window {
  // 简化后的addEventListener
  addEventListener(type: string, listener: EventListener)
}

// 平常使用
window.addEventListener('click', (e: Event) => {});
window.addEventListener('mouseover', (e: MouseEvent) => {});
复制代码

能够看到Window的listener函数要求参数是Event，可是平常使用时更多时候传入的是Event子类型。可是这里能够正常使用，正是其默认行为是双向协变的缘由。能够经过tsconfig.js中修改strictFunctionType属性来严格控制协变和逆变。

敲重点！！！敲重点！！！敲重点！！！

infer关键词的功能暂时先不作太详细的说明了，主要是用于extends的条件类型中让Ts本身推到类型，具体的能够查阅官网。可是关于infer的一些容易让人忽略可是很是重要的特性，这里必需要说起一下：

  • infer推导的名称相同而且都处于逆变的位置，则推导的结果将会是交叉类型。
type Bar<T> = T extends {
  a: (x: infer U) => void;
  b: (x: infer U) => void;
} ? U : never;

// type T1 = string
type T1 = Bar<{ a: (x: string) => void; b: (x: string) => void }>;

// type T2 = never
type T2 = Bar<{ a: (x: string) => void; b: (x: number) => void }>;
复制代码
  • infer推导的名称相同而且都处于协变的位置，则推导的结果将会是联合类型。
type Foo<T> = T extends {
  a: infer U;
  b: infer U;
} ? U : never;

// type T1 = string
type T1 = Foo<{ a: string; b: string }>;

// type T2 = string | number
type T2 = Foo<{ a: string; b: number }>;
复制代码

inter与协变逆变的参考文档点击这里

企业微信截图_8357a6f0-aa88-4faf-b21e-f1baa6bc790e.png

第二部分 Ts内置类型工具原理解析

Partial实现原理解析

Partial<T>将T的全部属性变成可选的。

/** * 核心实现就是经过映射类型遍历T上全部的属性， * 而后将每一个属性设置为可选属性 */
type Partial<T> = {
  [P in keyof T]?: T[P];
}
复制代码
  • [P in keyof T]经过映射类型，遍历T上的全部属性
  • ?:设置为属性为可选的
  • T[P]设置类型为原来的类型

扩展一下，将制定的key变成可选类型:

/** * 主要经过K extends keyof T约束K必须为keyof T的子类型 * keyof T获得的是T的全部key组成的联合类型 */
type PartialOptional<T, K extends keyof T> = {
  [P in K]?: T[P];
}

/** * @example * type Eg1 = { key1?: string; key2?: number } */
type Eg1 = PartialOptional<{
  key1: string,
  key2: number,
  key3: ''
}, 'key1' | 'key2'>;
复制代码

Readonly原理解析

/** * 主要实现是经过映射遍历全部key， * 而后给每一个key增长一个readonly修饰符 */
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

/** * @example * type Eg = { * readonly key1: string; * readonly key2: number; * } */
type Eg = Readonly<{
  key1: string,
  key2: number,
}>
复制代码

Pick

挑选一组属性并组成一个新的类型。

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
复制代码

基本和上述一样的知识点，就再也不赘述了。

Record

构造一个type，key为联合类型中的每一个子类型，类型为T。文字很差理解，先看例子：

/** * @example * type Eg1 = { * a: { key1: string; }; * b: { key1: string; }; * } * @desc 就是遍历第一个参数'a' | 'b'的每一个子类型，而后将值设置为第二参数 */
type Eg1 = Record<'a' | 'b', {key1: string}>
复制代码

Record具体实现：

/** * 核心实现就是遍历K，将值设置为T */
type Record<K extends keyof any, T> = {
  [P in K]: T
}

/** * @example * type Eg2 = {a: B, b: B} */
interface A {
  a: string,
  b: number,
}
interface B {
  key1: number,
  key2: string,
}
type Eg2 = Record<keyof A, B>
复制代码
  • 值得注意的是keyof any获得的是string | number | symbol
  • 缘由在于类型key的类型只能为string | number | symbol

扩展: 同态与非同态。划重点！！！ 划重点！！！ 划重点！！！

  • Partial、Readonly和Pick都属于同态的，即其实现须要输入类型T来拷贝属性，所以属性修饰符（例如readonly、?:）都会被拷贝。可从下面例子验证：
/** * @example * type Eg = {readonly a?: string} */
type Eg = Pick<{readonly a?: string}, 'a'>
复制代码

从Eg的结果能够看到，Pick在拷贝属性时，连带拷贝了readonly和?:的修饰符。

  • Record是非同态的，不须要拷贝属性，所以不会拷贝属性修饰符

可能到这里就有小伙伴疑惑了，为何Pick拷贝了属性，而Record没有拷贝？咱们来对比一下其实现：

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

type Record<K extends keyof any, T> = {
  [P in K]: T
}
复制代码

能够看到Pick的实现中，注意P in K（本质是P in keyof T），T为输入的类型，而keyof T则遍历了输入类型；而Record的实现中，并无遍历全部输入的类型，K只是约束为keyof any的子类型便可。

最后再类比一下Pick、Partial、readonly这几个类型工具，无一例外，都是使用到了keyof T来辅助拷贝传入类型的属性。

Exclude原理解析

Exclude<T, U>提取存在于T，但不存在于U的类型组成的联合类型。

/** * 遍历T中的全部子类型，若是该子类型约束于U（存在于U、兼容于U）， * 则返回never类型，不然返回该子类型 */
type Exclude<T, U> = T extends U ? never : T;

/** * @example * type Eg = 'key1' */
type Eg = Exclude<'key1' | 'key2', 'key2'>
复制代码

敲重点！！！

  • never表示一个不存在的类型
  • never与其余类型的联合后，是没有never的
/**
 * @example
 * type Eg2 = string | number
 */
type Eg2 = string | number | never
复制代码

所以上述Eg其实就等于key1 | never,也就是type Eg = key1

Extract

Extract<T, U>提取联合类型T和联合类型U的全部交集。

type Extract<T, U> = T extends U ? T : never;

/** * @example * type Eg = 'key1' */
type Eg = Extract<'key1' | 'key2', 'key1'>
复制代码

Omit原理解析

Omit<T, K>从类型T中剔除K中的全部属性。

/** * 利用Pick实现Omit */
type Omit = Pick<T, Exclude<keyof T, K>>;
复制代码
  • 换种思路想一下，其实现能够是利用Pick提取咱们须要的keys组成的类型
  • 所以也就是 Omit = Pick<T, 咱们须要的属性联合>
  • 而咱们须要的属性联合就是，从T的属性联合中排出存在于联合类型K中的
  • 所以也就是Exclude<keyof T, K>;

若是不利用Pick实现呢?

/** * 利用映射类型Omit */
type Omit2<T, K extends keyof any> = {
  [P in Exclude<keyof T, K>]: T[P]
}
复制代码
  • 其实现相似于Pick的原理实现
  • 区别在因而遍历的咱们须要的属性不同
  • 咱们须要的属性和上面的例子同样，就是Exclude<keyof T, K>
  • 所以，遍历就是[P in Exclude<keyof T, K>]

Parameters 和 ReturnType

Parameters 获取函数的参数类型，将每一个参数类型放在一个元组中。

/** * @desc 具体实现 */
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

/** * @example * type Eg = [arg1: string, arg2: number]; */
type Eg = Parameters<(arg1: string, arg2: number) => void>;
复制代码
  • Parameters首先约束参数T必须是个函数类型，因此(...args: any) => any>替换成Function也是能够的
  • 具体实现就是，判断T是不是函数类型，若是是则使用inter P让ts本身推导出函数的参数类型，并将推导的结果存到类型P上，不然就返回never；

敲重点！！！敲重点！！！敲重点！！！

  • infer关键词做用是让Ts本身推导类型，并将推导结果存储在其参数绑定的类型上。Eg:infer P 就是将结果存在类型P上，供使用。
  • infer关键词只能在extends条件类型上使用，不能在其余地方使用。

再敲重点！！！再敲重点！！！再敲重点！！！

  • type Eg = [arg1: string, arg2: number]这是一个元组，可是和咱们常见的元组type tuple = [string, number]。官网未提到该部分文档说明，其实能够把这个做为相似命名元组，或者具名元组的意思去理解。实质上没有什么特殊的做用，好比没法经过这个具名去取值不行的。可是从语义化的角度，我的以为多了语义化的表达罢了。

  • 定义元祖的可选项，只能是最后的选项

/** * 普通方式 */
type Tuple1 = [string, number?];
const a: Tuple1 = ['aa', 11];
const a2: Tuple1 = ['aa'];

/** * 具名方式 */
type Tuple2 = [name: string, age?: number];
const b: Tuple2 = ['aa', 11];
const b2: Tuple2 = ['aa'];
复制代码

扩展：infer实现一个推导数组全部元素的类型：

/** * 约束参数T为数组类型， * 判断T是否为数组，若是是数组类型则推导数组元素的类型 */
type FalttenArray<T extends Array<any>> = T extends Array<infer P> ? P : never;

/** * type Eg1 = number | string; */
type Eg1 = FalttenArray<[number, string]>
/** * type Eg2 = 1 | 'asd'; */
type Eg2 = FalttenArray<[1, 'asd']>
复制代码

ReturnType 获取函数的返回值类型。

/** * @desc ReturnType的实现其实和Parameters的基本同样 * 无非是使用infer R的位置不同。 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
复制代码

ConstructorParameters

ConstructorParameters能够获取类的构造函数的参数类型，存在一个元组中。

/** * 核心实现仍是利用infer进行推导构造函数的参数类型 */
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;


/** * @example * type Eg = string; */
interface ErrorConstructor {
  new(message?: string): Error;
  (message?: string): Error;
  readonly prototype: Error;
}
type Eg = ConstructorParameters<ErrorConstructor>;

/** * @example * type Eg2 = [name: string, sex?: number]; */
class People {
  constructor(public name: string, sex?: number) {}
}
type Eg2 = ConstructorParameters<typeof People>
复制代码
  • 首先约束参数T为拥有构造函数的类。注意这里有个abstract修饰符，等下会说明。
  • 实现时，判断T是知足约束的类时，利用infer P自动推导构造函数的参数类型，并最终返回该类型。

敲重点！！！敲重点！！！敲重点！！！

那么疑问来了，为何要对T要约束为abstract抽象类呢？看下面例子：

/** * 定义一个普通类 */
class MyClass {}
/** * 定义一个抽象类 */
abstract class MyAbstractClass {}

// 能够赋值
const c1: typeof MyClass = MyClass
// 报错，没法将抽象构造函数类型分配给非抽象构造函数类型
const c2: typeof MyClass = MyAbstractClass

// 能够赋值
const c3: typeof MyAbstractClass = MyClass
// 能够赋值
const c4: typeof MyAbstractClass = MyAbstractClass
复制代码

由此看出，若是将类型定义为抽象类（抽象构造函数），则既能够赋值为抽象类，也能够赋值为普通类；而反之则不行。

再敲重点！！！再敲重点！！！再敲重点！！！

这里继续提问，直接使用类做为类型，和使用typeof 类做为类型，有什么区别呢？

/** * 定义一个类 */
class People {
  name: number;
  age: number;
  constructor() {}
}

// p1能够正常赋值
const p1: People = new People();
// 等号后面的People报错，类型“typeof People”缺乏类型“People”中的如下属性: name, age
const p2: People = People;

// p3报错，类型 "People" 中缺乏属性 "prototype"，但类型 "typeof People" 中须要该属性
const p3: typeof People = new People();
// p4能够正常赋值
const p4: typeof People = People;
复制代码

结论是这样的：

  • 当把类直接做为类型时，该类型约束的是该类型必须是类的实例；即该类型获取的是该类上的实例属性和实例方法（也叫原型方法）；
  • 当把typeof 类做为类型时，约束的知足该类的类型；即该类型获取的是该类上的静态属性和方法。

最后，只须要对infer的使用换个位置，即可以获取构造函数返回值的类型：

type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;
复制代码

Ts compiler内部实现的类型

  • Uppercase
/** * @desc 构造一个将字符串转大写的类型 * @example * type Eg1 = 'ABCD'; */
type Eg1 = Uppercase<'abcd'>;
复制代码
  • Lowercase
/** * @desc 构造一个将字符串转小大写的类型 * @example * type Eg2 = 'abcd'; */
type Eg2 = Lowercase<'ABCD'>;
复制代码
  • Capitalize
/** * @desc 构造一个将字符串首字符转大写的类型 * @example * type Eg3 = 'abcd'; */
type Eg3 = Capitalize<'Abcd'>;
复制代码
  • Uncapitalize
/** * @desc 构造一个将字符串首字符转小写的类型 * @example * type Eg3 = 'ABCD'; */
type Eg3 = Uncapitalize<'aBCD'>;
复制代码

这些类型工具，在lib.es5.d.ts文件中是看不到具体定义的：

type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;
复制代码

企业微信截图_1900dfc9-3c22-4af2-9523-6860bcf03e03.png

第三部分 自定义Ts高级类型工具及类型编程技巧

SymmetricDifference

SymmetricDifference<T, U>获取没有同时存在于T和U内的类型。

/** * 核心实现 */
type SymmetricDifference<A, B> = SetDifference<A | B, A & B>;

/** * SetDifference的实现和Exclude同样 */
type SymmetricDifference<T, U> = Exclude<T | U, T & U>;

/** * @example * type Eg = '1' | '4'; */
type Eg = SymmetricDifference<'1' | '2' | '3', '2' | '3' | '4'>
复制代码

其核心实现利用了3点：分发式联合类型、交叉类型和Exclude。

  • 首先利用Exclude从获取存在于第一个参数可是不存在于第二个参数的类型
  • Exclude第2个参数是T & U获取的是全部类型的交叉类型
  • Exclude第一个参数则是T | U，这是利用在联合类型在extends中的分发特性，能够理解为Exclude<T, T & U> | Exclude<U, T & U>;

总结一下就是，提取存在于T但不存在于T & U的类型，而后再提取存在于U但不存在于T & U的，最后进行联合。

FunctionKeys

获取T中全部类型为函数的key组成的联合类型。

/** * @desc NonUndefined判断T是否为undefined */
type NonUndefined<T> = T extends undefined ? never : T;

/** * @desc 核心实现 */
type FunctionKeys<T extends object> = {
  [K in keyof T]: NonUndefined<T[K]> extends Function ? K : never;
}[keyof T];

/** * @example * type Eg = 'key2' | 'key3'; */
type AType = {
    key1: string,
    key2: () => void,
    key3: Function,
};
type Eg = FunctionKeys<AType>;
复制代码
  • 首先约束参数T类型为object
  • 经过映射类型K in keyof T遍历全部的key，先经过NonUndefined<T[K]>过滤T[K]为undefined | null的类型，不符合的返回never
  • 若T[K]为有效类型，则判断是否为Function类型，是的话返回K,不然never；此时能够获得的类型，例如：
/** * 上述的Eg在此时应该是以下类型，伪代码： */
type TempType = {
    key1: never,
    key2: 'key2',
    key3: 'key3',
}
复制代码
  • 最后通过{省略}[keyof T]索引访问，取到的为值类型的联合类型never | key2 | key3,计算后就是key2 | key3;

敲重点！！！敲重点！！！敲重点！！！

  • T[]是索引访问操做，能够取到值的类型
  • T['a' | 'b']若[]内参数是联合类型，则也是分发索引的特性，依次取到值的类型进行联合
  • T[keyof T]则是获取T全部值的类型类型；
  • never和其余类型进行联合时，never是不存在的。例如：never | number | string等同于number | string

再敲重点！！！再敲重点！！！再敲重点！！！

  • null和undefined能够赋值给其余类型（开始该类型的严格赋值检测除外）,因此上述实现中须要使用NonUndefined先行判断。
  • NonUndefined中的实现，只判断了T extends undefined，其实也是由于二者能够互相兼容的。因此你换成T extends null或者T extends null | undefined都是能够的。
// A = 1
type A = undefined extends null ? 1 : 2;
// B = 1
type B = null extends undefined ? 1 : 2;
复制代码

最后，若是你想写一个获取非函数类型的key组成的联合类型，无非就是K和never的位置不同罢了。一样，你也能够实现StringKeys、NumberKeys等等。可是记得能够抽象个工厂类型哈：

type Primitive =
  | string
  | number
  | bigint
  | boolean
  | symbol
  | null
  | undefined;

/** * @desc 用于建立获取指定类型工具的类型工厂 * @param T 待提取的类型 * @param P 要建立的类型 * @param IsCheckNon 是否要进行null和undefined检查 */
type KeysFactory<T, P extends Primitive | Function | object, IsCheckNon extends boolean> = {
  [K in keyof T]: IsCheckNon extends true
    ? (NonUndefined<T[K]> extends P ? K : never)
    : (T[K] extends P ? K : never);
}[keyof T];

/** * @example * 例如上述KeysFactory就能够经过工厂类型进行建立了 */
type FunctionKeys<T> = KeysFactory<T, Function, true>;
type StringKeys<T> = KeysFactory<T, string, true>;
type NumberKeys<T> = KeysFactory<T, string, true>;
复制代码

MutableKeys

MutableKeys<T>查找T全部可选类型的key组成的联合类型。

/** * 核心实现 */
type MutableKeys<T extends object> = {
  [P in keyof T]-?: IfEquals<
    { [Q in P]: T[P] },
    { -readonly [Q in P]: T[P] },
    P
  >;
}[keyof T];

/** * @desc 一个辅助类型，判断X和Y是否类型相同， * @returns 是则返回A，不然返回B */
type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2)
  ? A
  : B;
复制代码

MutableKeys仍是有必定难度的，讲解MutableKeys的实现，咱们要分下面几个步骤：

第一步，先理解只读和非只读的一些特性

/** * 遍历类型T，原封不动的返回，有点相似于拷贝类型的意思 */
type RType1<T> = {
  [P in keyof T]: T[P];
}
/** * 遍历类型T，将每一个key变成非只读 * 或者理解成去掉只读属性更好理解。 */
type RType2<T> = {
  -readonly[P in keyof T]: T[P];
}

// R0 = { a: string; readonly b: number }
type R0 = RType1<{a: string, readonly b: number}>

// R1 = { a: string }
type R1 = RType1<{a: string}>;
// R2 = { a: string }
type R2 = RType2<{a: string}>;

// R3 = { readonly a: string }
type R3 = RType1<{readonly a: string}>;
// R4 = { a: string }
type R4 = RType2<{readonly a: string}>;
复制代码

能够看到：RType1和RType2的参数为非只读的属性时，R1和R2的结果是同样的；RType1和RType2的参数为只读的属性时，获得的结果R3是只读的，R4是非只读的。因此，这里要敲个重点了：

  • [P in Keyof T]是映射类型，而映射是同态的，同态即会拷贝原有的属性修饰符等。能够参考R0的例子。
  • 映射类型上的-readonly表示为非只读，或者能够理解为去掉只读。对于只读属性加上-readonly变成了非只读，而对非只读属性加上-readonly后仍是非只读。一种常见的使用方式，好比你想把属性变成都是非只读的，不能前面不加修饰符（虽然不写就表示非只读），可是要考虑到同态拷贝的问题。

第二步，解析IfEquals

IfEquals用于判断类型X和Y是否相同，相等则返回A，不然返回B。这个函数是比较难的，也别怕啦，下面讲完就妥妥的明白啦~

type IfEquals<X, Y, A = X, B = never> =
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2)
    ? A : B;
复制代码
  • 首先IfEquals<X, Y, A, B>的四个参数，X和Y是待比较的两个类型，若是相等则返回A，不相等返回B。
  • IfEquals的基本骨架是type IfEquals<> = (参数1) extends (参数2) ? A : B这样的，就是判断若是参数1的类型可以分配给参数2的类型，则返回A，不然返回B;
  • 参数1和参数2的基本结构是同样的，惟一区别在于X和Y不一样。这里看下具体下面的例子：
// A = <T>() => T extends string ? 1 : 2;
type A = <T>() => T extends string ? 1 : 2;
// B = <T>() => T extends number ? 1 : 2;
type B = <T>() => T extends number ? 1 : 2;

// C = 2
type C = A extends B ? 1 : 2;
复制代码

是否是很奇怪，为何能推导出A和B类型是不同的？告诉你答案：

  • 这是利用了Ts编译器的一个特色，就是Ts编译器会认为若是两个类型（好比这里的X和Y）仅被用于约束两个相同的泛型函数则是相同的。这理解起来有些难以想象，或者说在逻辑上这种逻辑并不对（由于能够举出反例），可是Ts开发团队保证了这一特性从此不会变。可参考这里。
  • 注意，这里也会判断的属性修饰符，例如readonly, 可选属性等，看经过下面的例子验证：
/** * T2比T1多了readonly修饰符 * T3比T1多了可选修饰符 * 这里控制单一变量进行验证 */
type T1 = {key1: string};
type T2 = {readonly key1: string};
type T3 = {key1?: string};

// A1 = false
type A1 = IfEquals<T1, T2, true , false>;
// A2 = false
type A2 = IfEquals<T1, T3, true , false>;
复制代码
  • IfEquals最后就是借助1和2来辅助判断（语法层面的），还有就是给A的默认值为X，B的默认值为never。

最后，若是你是个爱（搞）钻（事）研（情）的小宝宝，你或许会对我发出灵魂拷问：判断类型是否相等（兼容）为何不直接使用type IfEquals<X, Y, A, B> = X extends Y ? A : B呢？既简单有粗暴（PS：来自你的邪魅一笑~）。答案，咱们看下下面的示例：

type IfEquals<X, Y, A, B> = X extends Y ? A : B;

/** * 还用上面的例子 */
type T1 = {key1: string};
type T2 = {readonly key1: string};
type T3 = {key1?: string};

// A1 = true
type A1 = IfEquals<T1, T2, true , false>;
// A2 = true
type A2 = IfEquals<T1, T3, true , false>;
复制代码

答案显而易见，对readonly等这些修饰符，真的无能无力了。夸爪Kill~~~

第3步，解析MutableKeys实现逻辑

  • MutableKeys首先约束T为object类型
  • 经过映射类型[P in keyof T]进行遍历，key对应的值则是IfEquals<类型1, 类型2, P>，若是类型1和类型2相等则返回对应的P（也就是key），不然返回never。

而P其实就是一个只有一个当前key的联合类型，因此[Q in P]: T[P]也只是一个普通的映射类型。可是要注意的是参数1{ [Q in P]: T[P] }是经过{}构造的一个类型，参数2{ -readonly [Q in P]: T[P] }也是经过{}构造的一个类型,二者的惟一区别即便-readonly。

因此这里就有意思了，回想一下上面的第一步的例子，是否是就理解了：若是P是只读的，那么参数1和参数2的P最终都是只读的；若是P是非只读的，则参数1的P为非只读的，而参数2的P被-readonly去掉了非只读属性从而变成了只读属性。所以就完成了筛选：P为非只读时IfEquals返回的P，P为只读时IfEquals返回never。

  • 因此key为非只读时，类型为key，不然类型为never，最后经过[keyof T]获得了全部非只读key的联合类型。

OptionalKeys

OptionalKeys<T>提取T中全部可选类型的key组成的联合类型。

type OptionalKeys<T> = {
  [P in keyof T]: {} extends Pick<T, P> ? P : never
}[keyof T];

type Eg = OptionalKeys<{key1?: string, key2: number}>
复制代码
  • 核心实现，用映射类型遍历全部key，经过Pick<T, P>提取当前key和类型。注意，这里也是利用了同态拷贝会拷贝可选修饰符的特性。
  • 利用{} extends {当前key: 类型}判断是不是可选类型。
// Eg2 = false
type Eg2 = {} extends {key1: string} ? true : false;
// Eg3 = true
type Eg3 = {} extends {key1?: string} ? true : false;
复制代码

利用的就是{}和只包含可选参数类型{key?: string}是兼容的这一特性。把extends前面的{}替换成object也是能够的。

加强Pick

  • PickByValue提取指定值的类型
// 辅助函数，用于获取T中类型不能never的key组成的联合类型
type TypeKeys<T> = T[keyof T];

/** * 核心实现 */
type PickByValue<T, V> = Pick<T,
  TypeKeys<{[P in keyof T]: T[P] extends V ? P : never}>
>;

/** * @example * type Eg = { * key1: number; * key3: number; * } */
type Eg = PickByValue<{key1: number, key2: string, key3: number}, number>;
复制代码

Ts的类型兼容特性，因此相似string是能够分配给string | number的，所以上述并非精准的提取方式。若是实现精准的方式，则能够考虑下面个这个类型工具。

  • PickByValueExact精准的提取指定值的类型
/** * 核心实现 */
type PickByValueExact<T, V> = Pick<T,
  TypeKeys<{[P in keyof T]: [T[P]] extends [V]
    ? ([V] extends [T[P]] ? P : never)
    : never;
  }>
>

// type Eg1 = { b: number };
type Eg1 = PickByValueExact<{a: string, b: number}, number>
// type Eg2 = { b: number; c: number | undefined }
type Eg2 = PickByValueExact<{a: string, b: number, c: number | undefined}, number>
复制代码

PickByValueExact的核心实现主要有三点：

一是利用Pick提取咱们须要的key对应的类型

二是利用给泛型套一层元组规避extends的分发式联合类型的特性

三是利用两个类型互相兼容的方式判断是否相同。

具体能够看下下面例子：

type Eq1<X, Y> = X extends Y ? true : false;
type Eq2<X, Y> = [X] extends [Y] ? true : false;
type Eq3<X, Y> = [X] extends [Y]
  ? ([Y] extends [X] ? true : false)
  : false;

// boolean, 指望是false
type Eg1 = Eq1<string | number, string>
// false
type Eg2 = Eq2<string | number, string>

// true，指望是false
type Eg3 = Eq2<string, string | number>
// false
type Eg4 = Eq3<string, string | number>

// true，非strictNullChecks模式下的结果
type Eg5 = Eq3<number | undefined, number>
// false，strictNullChecks模式下的结果
type Eg6 = Eq3<number | undefined, number>
复制代码
  • 从Eg1和Eg2对比能够看出，给extends参数套上元组能够避免分发的特性，从而获得指望的结果；
  • 从Eg3和Eg4对比能够看出，经过判断两个类型互相是否兼容的方式，能够获得从属类型的正确相等判断。
  • 从Eg5和Eg6对比能够看出，非strictNullChecks模式下，undefined和null能够赋值给其余类型的特性，致使number | undefined, number是兼容的，由于是非strictNullChecks模式，因此有这个结果也是符合预期。若是不须要此兼容结果，彻底能够开启strictNullChecks模式。

最后，同理想获得OmitByValue和OmitByValueExact基本同样的思路就很少说了，你们能够本身思考实现。

Intersection

Intersection<T, U>从T中提取存在于U中的key和对应的类型。（注意，最终是从T中提取key和类型）

/** * 核心思路利用Pick提取指定的key组成的类型 */
type Intersection<T extends object, U extends object> = Pick<T,
  Extract<keyof T, keyof U> & Extract<keyof U, keyof T>
>

type Eg = Intersection<{key1: string}, {key1:string, key2: number}>
复制代码
  • 约束T和U都是object，而后利用Pick提取指定的key组成的类型
  • 经过Extract<keyof T, keyof U>提取同时存在于T和U中的key，Extract<keyof U, keyof T>也是一样的操做

那么为何要作2次Extract而后再交叉类型呢？缘由仍是在于处理类型的兼容推导问题，还记得string可分配给string | number的兼容吧。

扩展：

定义Diff<T, U>，从T中排除存在于U中的key和类型。

type Diff<T extends object, U extends object> = Pick<
  T,
  Exclude<keyof T, keyof U>
>;
复制代码

Overwrite 和 Assign

Overwrite<T, U>从U中的同名属性的类型覆盖T中的同名属性类型。(后者中的同名属性覆盖前者)

/** * Overwrite实现 * 获取前者独有的key和类型，再取二者共有的key和该key在后者中的类型，最后合并。 */
type Overwrite<
  T extends object,
  U extends object,
  I = Diff<T, U> & Intersection<U, T>
> = Pick<I, keyof I>;

/** * @example * type Eg1 = { key1: number; } */
type Eg1 = Overwrite<{key1: string}, {key1: number, other: boolean}>
复制代码
  • 首先约束T和U这两个参数都是object
  • 借助一个参数I的默认值做为实现过程，使用的时候不须要传递I参数（只是辅助实现的）
  • 经过Diff<T, U>获取到存在于T可是不存在于U中的key和其类型。（即获取T本身特有key和类型）。
  • 经过Intersection<U, T>获取U和T共有的key已经该key在U中的类型。即获取后者同名key已经类型。
  • 最后经过交叉类型进行合并，从而曲线救国实现了覆盖操做。

扩展：如何实现一个Assign<T, U>（相似于Object.assign()）用于合并呢？

// 实现
type Assign<
  T extends object,
  U extends object,
  I = Diff<T, U> & Intersection<U, T> & Diff<U, T>
> = Pick<I, keyof I>;

/** * @example * type Eg = { * name: string; * age: string; * other: string; * } */
type Eg = Assign<
  { name: string; age: number; },
  { age: string; other: string; }
>;
复制代码

想一下，是否是就是先找到前者独有的key和类型，再找到二者共有的key以及该key在后者中的类型，最后找到后者独有的key和类型，最后依次的合并进去。

DeepRequired

DeepRequired<T>将T的转换成必须属性。若是T为对象，则将递归对象将全部key转换成required，类型转换为NonUndefined；若是T为数组则递归遍历数组将每一项设置为NonUndefined。

/** * DeepRequired实现 */
type DeepRequired<T> = T extends (...args: any[]) => any
  ? T
  : T extends Array<any>
    ? _DeepRequiredArray<T[number]>
    : T extends object
      ? _DeepRequiredObject<T>
      : T;

// 辅助工具，递归遍历数组将每一项转换成必选
interface _DeepRequiredArray<T> extends Array<DeepRequired<NonUndefined<T>>> {}

// 辅助工具，递归遍历对象将每一项转换成必选
type _DeepRequiredObject<T extends object> = {
  [P in keyof T]-?: DeepRequired<NonUndefined<T[P]>>
}
复制代码
  • DeepRequired利用extends判断若是是函数或Primitive的类型，就直接返回该类型。
  • 若是是数组类型，则借助_DeepRequiredArray进行递归，而且传递的参数为数组全部子项类型组成的联合类型，以下：
type A = [string, number]
/** * @description 对数组进行number索引访问， * 获得的是全部子项类型组成的联合类型 * type B = string | number */
type B = A[number]
复制代码

  • _DeepRequiredObject是个接口（定义成type也能够），其类型是Array<T>；而此处的T则经过DeepRequired<T>进行对每一项进行递归；在T被使用以前，先被NonUndefined<T>处理一次，去掉无效类型。

  • 若是是对象类型，则借助_DeepRequiredObject实现对象的递归遍历。_DeepRequiredObject只是一个普通的映射类型进行变量，而后对每一个key添加-?修饰符转换成required类型。

DeepReadonlyArray

DeepReadonlyArray<T>将T的转换成只读的，若是T为object则将全部的key转换为只读的，若是T为数组则将数组转换成只读数组。整个过程是深度递归的。

/** * DeepReadonly实现 */
type DeepReadonly<T> = T extends ((...args: any[]) => any) | Primitive
  ? T
  : T extends _DeepReadonlyArray<infer U>
  ? _DeepReadonlyArray<U>
  : T extends _DeepReadonlyObject<infer V>
  ? _DeepReadonlyObject<V>
  : T;

/** * 工具类型，构造一个只读数组 */
interface _DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}

/** * 工具类型，构造一个只读对象 */
type _DeepReadonlyObject<T> = {
  readonly [P in keyof T]: DeepReadonly<T[P]>;
};
复制代码
  • 基本实现原理和DeepRequired同样，可是注意infer U自动推导数组的类型，infer V推导对象的类型。

UnionToIntersection

将联合类型转变成交叉类型。

type UnionToIntersection<T> = (T extends any
  ? (arg: T) => void
  : never
) extends (arg: infer U) => void ? U : never
type Eg = UnionToIntersection<{ key1: string } | { key2: number }>
复制代码
  • T extends any ? (arg: T) => void : never该表达式必定走true分支，用此方式构造一个逆变的联合类型(arg: T1) => void | (arg: T2) => void | (arg: Tn) => void
  • 再利用第二个extends配合infer推导获得U的类型，可是利用infer对协变类型的特性获得交叉类型。

参考内容

转载请注明做者及出处！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程