Typescript 边学边练

你是否曾经：

1. 看了各类TS文档，写起来仍是似懂非懂；
2. 接触了一些TS关键字，用起来不太熟练，缺少明确的理论参考；
3. TS写着写着降级到了JS；
4. 类型在不知道什么地方就断了层，再也接不上了；

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

• 适合对象：“掌握JS，看过TS的，打算增强理解的前端同窗”
• 看完收获：“掌握TS的若干核心知识点；体会类型体操的快乐”
• 食用姿式：
  • 按题不按期食用（每一个题都有涉及到相关知识点）
  • 食用顺序：关键词 -> 题目要求 -> 知识点 -> 解题 -> 答题连接 -> 参考答案 -> 参考JS -> 知识点
  • 场景和解答仅供参考，并非“TS完备”的答案

题目汇总

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

参考连接

1. 类型分发：Documentation - TypeScript 2.8
2. 泛型：Documentation - Generics
3. 递归类型：Documentation - TypeScript 3.7
4. 函数中的泛型：Documentation - More on Functions
5. keyof关键字：Documentation - TypeScript 2.1
6. this类型：Documentation - Utility Types
7. infer关键字：infer | 深刻理解 TypeScript
8. Rest/Spread Parameters:Documentation - TypeScript 3.0
9. 模板字符串：Documentation - TypeScript 4.1
10. 字符串部份内置类型：Documentation - Template Literal Types
11. never判断：

- [Conditional Types - Checking extends never](https://github.com/microsoft/TypeScript/issues/23182);
- <https://github.com/type-challenges/type-challenges/issues/614>
复制代码

12. Dependent Type:

- [TypeScript 类型技巧 - 多参数类型约束](https://zhuanlan.zhihu.com/p/95828198)；
- [Typescript Tips: 动态重载实现廉价版dependent type](https://zhuanlan.zhihu.com/p/95829351)
复制代码

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

- [TypeScript union function types](https://stackoverflow.com/questions/58629426/typescript-union-function-types)
复制代码

14. 关于TS图灵完备：证实 JS 和 TS 类型编程是图灵完备的

欢迎关注「 字节前端 ByteFE 」

简历投递联系邮箱「tech@bytedance.com」