Type-Challenges

介绍

在学习完TypeScript一些基础知识后，我们已经可以熟练使用一些基本类型定义了，但对于TypeScript的高级用法却依旧无法入门，为了更有趣的学习TypeScript高级用法，我们选择Type-Challenges类型挑战来作为我们学习的目标。

在Type-Challenges中，可以从简单(easy)、中等(medium)、困难(hard)以及地狱(extreme)难度，循序渐进的学习TypeScript高级技巧。

如果你需要选择其它的方向来深入学习TypeScript高级技巧，这里也有一些推荐的开源项目：

官方内置：在lib.es5.d.ts文件中，TypeScript官方默认内置了一些辅助工具函数，例如：Partial、Required、Pick以及Record等等。
其它开源库：utility-types、ts-toolbelt、SimplyTyped

在之后的挑战中，我们会尽力对每道题进行必要的讲解，力争在进行Type-Challenges类型挑战时弄清楚所有涉及到的知识点。

核心知识点

加号和减号

提示

加号和减号的用法类似。

在一些内置工具中，可能会出现+或者-这些符号，例如：

type Required<T> = {
  [P in keyof T]-?: T[P]
}
type Person = {
  name: string;
  age?: number;
}

// 结果：{ name: string; age: number; }
type result = Required<Person>

观察以上结果可以得出结论：-?是去掉类型中属性后面的?，整个Required的实际效果是去掉T类型中所有属性键后面的?，让所有属性变成必填的。

keyof 和 in

keyof和in经常会连在一起使用，当它们连在一起使用时，通常表示一个迭代的过程。

keyof

在TS中，keyof T这段代码表示获取T类型中所有属性键，这些属性键组合成一个联合类型，例如：

type Person = {
  name: string;
  age: number;
}
// 结果：'name' | 'age'
type result = keyof Person

TS中的keyof T，它有点类似JavaScript中的Object.keys()，它们的共同点都是获取属性键的集合，只不过keyof T得到的结果是一个联合类型，而Object.keys()得到的是一个数组。

in

in操作符的右侧通常跟一个联合类型，可以使用in来迭代这个联合类型，如下：

// 仅演示使用, K为每次迭代的项
K in 'name' | 'age' | 'sex'
K = 'name' // 第一次迭代结果
K = 'age'  // 第二次迭代结果
K = 'sex'  // 第三次迭代结果

根据keyof和in的特点，我们可以撰写一些辅助工具，这里以Readonly为例。

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}
type Person = {
  name: string;
  age: number;
}
// 结果：{ readony name: string; readonly age: number; }
type result = Readonly<Person>

代码详解：

[P in keyof T]：这段代码表示遍历T中的每一个属性键，每次遍历时属性键取名为P，这和JavaScript中的for in非常类似：

// ts中的迭代
P in keyof T

// js中的迭代
for (let key in obj)

typeof

TS中的typeof，可以用来获取一个JavaScript变量的类型，经常用于获取一个普通对象或者一个函数的类型，如下：

const add = (a: number, b: number): number => {
  return a + b
}
const obj = {
  name: 'AAA',
  age: 23
}

// 结果：(a: number, b:number) => number
type t1  = typeof add
// 结果：{ name: string; age: number; }
type t2 = typeof obj

never

never类型表示永远不会有值的一种类型。

例如，如果一个函数抛出一个错误，那么这个函数就可以用never或者void来表示其返回值，如下：

// never更适合用来表示永远没有返回值的函数
function handlerError(message: string): never {
  throw new Error(message)
}
// void适合用来表示返回值为空的函数
function handlerError(message: string): void {
  throw new Error(message)
}

关于never的另外一个知识点是：如果一个联合类型中存在never，那么实际的联合类型并不会包含never，如下：

// 定义
type test = 'name' | 'age' | never
// 实际
type test = 'name' | 'age'

extends

extends关键词，一般有两种用法：类型约束和条件类型。

类型约束

类型约束经常和泛型一起使用：

// 类型约束
U extends keyof T

keyof T是一个整体，它表示一个联合类型。U extends Union这一整段表示U的类型被收缩在一个联合类型的范围内。例如： U extends 'name' | 'age'，则表示U只能为name或者age二者其中之一。

条件类型

常见的条件类型表现形式如下：

T extends U ? 'Y' : 'N'

我们发现条件类型有点像JavaScript中的三元表达式，事实上它们的工作原理是类似的，例如：

type result1 = true extends boolean ? true : false                    // true
type result2 = 'name' extends 'name' | 'age' ? true : false           // true
type result3 = [1, 2, 3] extends { length: number; } ? true : false   // true
type result4 = [1, 2, 3] extends Array<number> ? true : false         // true

在条件类型中，有一个特别需要注意的东西就是：分布式条件类型，如下：

// 内置工具：交集
type Extract<T, U> = T extends U ? T : never;
type type1 = 'name'|'age'
type type2 = 'name'|'address'|'sex'

// 交集结果：'name'
type result = Extract<type1, type2>

// 推理步骤
'name'|'age' extends 'name'|'address'|'sex' ? T : never
step1： ('name' extends 'name'|'address'|'sex' ? 'name' : never) => 'name'
step2:  ('age' extends 'name'|'address'|'sex' ? 'age' : never)   => never
result: 'name' | never => 'name'

代码详解：

T extends U ? T : never：因为T是一个联合类型，所以这里适用于分布式条件类型的概念。根据其概念，在实际的过程中会把T类型中的每一个子类型进行迭代，如下：

// 第一次迭代：
'name' extends 'name'|'address'|'sex' ? 'name' : never
// 第二次迭代：
'age' extends 'name'|'address'|'sex' ? 'age' : never

在迭代完成之后，会把每次迭代的结果组合成一个新的联合类型(根据never类型的特点，最后的结果会剔除掉never)，如下：

type result = 'name' | never => 'name'

infer

infer关键词的作用是延时推导，它会在类型未推导时进行占位，等到真正推导成功后，它能准确的返回正确的类型。

为了更好的理解infer关键词的用法，我们使用ReturnType这个例子来说明，ReturnType是一个用来获取函数返回类型的工具。

type ReturnType<T> = T extends (...args: any) => infer R ? R : never

const add = (a: number, b: number): number => {
  return a + b
}
// 结果: number
type result = ReturnType<typeof add>

代码详解：

T extends (...args: any) => infer R：如果不看infer R，这段代码实际表示：T是不是一个函数类型。
(...args: any) => infer R：这段代码实际表示一个函数类型，其中把它的参数使用args来表示，把它的返回类型用R来进行占位。如果T满足是一个函数类型，那么我们返回其函数的返回类型，也就是R；如果不是一个函数类型，就返回never。

TS中的infer占位更像JavaScript中的模板字符串：

// 函数的返回类型使用R占位表示
(...args: any) => info R

// 模板字符串中的值，使用变量name占位表示
const str = `hello, ${name}`

& 符号

在TS中有两种类型值得我们重点关注：联合类型和交叉类型。

联合类型一般适用于基本类型的合并，它使用|符号进行连接，如下：

type result = 'name' | 1 | true | null

而交叉类型则适用于对象或者函数的合并，它使用&符号进行连接，如下：

type result = T & U

T & U表示一个新的类型，其中这个类型包含T和U中所有的键，这和JavaScript中的Object.assign()函数的作用非常类似。

根据交叉类型的概念，我们可以封装一个合并对象的merge函数，如下：

// ts v4.8.4以上版本
function merge<T, U, K extends T & U>(to: T, from: U): K {
  for (let key in from) {
    ;(to as unknown as K)[key] = from[key] as any
  }
  return to as unknown as K
}

// ts v4.8.4以下版本
function merge<T, U, K extends T & U>(to: T, from: U): K  {
  for (let key in from) {
    ;(to as K)[key] = from[key] as any
  }
  return to as K
}

const obj1 = { name: 'AAA' }
const obj2 = { age: 23 }
// js结果：{ name：'AAA'; age: 23; }
// ts结果：{ name: string; age: number; }
const result = merge(obj1, obj2)

初级

内置Pick(选取)

用法

Pick表示从一个类型中选取指定的几个字段组合成一个新的类型，用法如下：

type Person = {
  name: string;
  age: number;
  address: string;
  sex: number;
}
// 结果: { name: string; address: string; }
type PickResult = Pick<Person, 'name' | 'address'>