10-28 07:30 阅读 91

Typescript 边学边练

你是否曾经：
看了各种TS文档，写起来还是似懂非懂；
接触了一些TS关键字，用起来不太熟练，缺乏明确的理论参考；
TS写着写着降级到了JS；
类型在不知道什么地方就断了层，再也接不上了；
基于我们踩坑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

参考链接

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

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

Dependent Type:

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

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

- [TypeScript union function types](https://stackoverflow.com/questions/58629426/typescript-union-func

作者：字节前端
链接：https://juejin.cn/post/6989063604016250893