Typescript 边学边练

你是否曾经：

看了各种 TS 文档，写起来还是似懂非懂；

接触了一些 TS 关键字，用起来不太熟练，缺乏明确的理论参考；

TS 写着写着降级到了 JS；

类型在不知道什么地方就断了层，再也接不上了；

基于我们踩坑 TS 的过程，总结了这篇文章。通过边学边练，从问题到解答到知识点，带你体验类型体操的快乐，并把类型体操应用在日常开发中。

适合对象：“掌握 JS，看过 TS 的，打算加强理解的前端同学”
看完收获：“掌握 TS 的若干核心知识点；体会类型体操的快乐”
食用姿势：

按题不定期食用（每个题都有涉及到相关知识点）
食用顺序：关键词 -> 题目要求 -> 知识点 -> 解题 -> 答题链接 -> 参考答案 -> 参考 JS -> 知识点
场景和解答仅供参考，并不是“TS 完备”的答案

题目汇总

序号	标题	难度指数	关键词	题目摘要
1.	Extract^[1]	?	`generics`、`union`、`extends`	从某联合类型中选出“和其他类型相交”一部分
2.	Lookup^[2]	??	`generics`、`union`、`extends`	从某联合类型中选出“满足特定条件的”一部分
3.	Chainable Option^[3]	??	`generics`、`recursive`	使用递归使类型满足链式调用
4.	SubType^[4]	??	`keyof`	给对象做 merge 操作
5.	Change Argument^[5]	???	`infer`、`ReturnType`、`Parameters`	操作函数的参数和返回值的类型
6.	Underscore^[6]	???	`Template Literal Types`、`recursive`	下划线字符串转驼峰式
7.	EventEmitter^[7]	????	`generics`、`function overload`、`Intersection`	通过泛型解决函数参数间的相互依赖
8.	Permutation^[8]	????	`union`、`extends`、`never`	全排列问题
9.	Simple Vue^[9]	?????	`this`	模拟一个 Vue 的 this 操作
10.	Union To Tuple^[10]	?????	`function overload`、`Intersection`	无序联合类型转有序 tuple

参考链接

类型分发：Documentation - TypeScript 2.8^[11]
泛型：Documentation - Generics^[12]
递归类型：Documentation - TypeScript 3.7^[13]
函数中的泛型：Documentation - More on Functions^[14]
keyof 关键字：Documentation - TypeScript 2.1^[15]
this 类型：Documentation - Utility Types^[16]
infer 关键字：infer | 深入理解 TypeScript^[17]
Rest/Spread Parameters:Documentation - TypeScript 3.0^[18]
模板字符串：Documentation - TypeScript 4.1^[19]
字符串部分内置类型：Documentation - Template Literal Types^[20]
never 判断：

Conditional Types - Checking extends never^[21];
https://github.com/type-challenges/type-challenges/issues/614

Dependent Type:

TypeScript 类型技巧 - 多参数类型约束^[22]；
Typescript Tips: 动态重载实现廉价版 dependent type^[23]

关于交叉类型和函数重载：

TypeScript union function types^[24]

关于 TS 图灵完备：证明 JS 和 TS 类型编程是图灵完备的^[25]

参考资料

[1]

Extract: https://juejin.cn/post/6981286316998656008

[2]

Lookup: https://juejin.cn/post/6986176614367248392

[3]

Chainable Option: https://juejin.cn/post/6986181848116396063

[4]

SubType: https://juejin.cn/post/6986606043283324942

[5]

Change Argument: https://juejin.cn/post/6987001375938838542

[6]

Underscore: https://juejin.cn/post/6987002391212392462

[7]

EventEmitter: https://juejin.cn/post/6987585311228297230

[8]

Permutation: https://juejin.cn/post/6987586892153765902

[9]

Simple Vue: https://juejin.cn/post/6987590161735368718

[10]

Union To Tuple: https://juejin.cn/post/6987596107866079269

[11]

Documentation - TypeScript 2.8: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types

[12]

Documentation - Generics: https://www.typescriptlang.org/docs/handbook/2/generics.html

[13]

Documentation - TypeScript 3.7: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#more-recursive-type-aliases

[14]

Documentation - More on Functions: https://www.typescriptlang.org/docs/handbook/2/functions.html#generic-functions

[15]

Documentation - TypeScript 2.1: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types

[16]

Documentation - Utility Types: https://www.typescriptlang.org/docs/handbook/utility-types.html#thistypetype

[17]

infer | 深入理解 TypeScript: https://jkchao.github.io/typescript-book-chinese/tips/infer.html#%E4%BB%8B%E7%BB%8D

[18]

Documentation - TypeScript 3.0: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#tuples-in-rest-parameters-and-spread-expressions

[19]

Documentation - TypeScript 4.1: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#template-literal-types

[20]

Documentation - Template Literal Types: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#uppercasestringtype

[21]

Conditional Types - Checking extends never: https://github.com/microsoft/TypeScript/issues/23182

[22]

TypeScript 类型技巧 - 多参数类型约束: https://zhuanlan.zhihu.com/p/95828198

[23]

Typescript Tips: 动态重载实现廉价版 dependent type: https://zhuanlan.zhihu.com/p/95829351

[24]

TypeScript union function types: https://stackoverflow.com/questions/58629426/typescript-union-function-types