Typescript 边学边练
共 4152字，需浏览 9分钟
·
2021-08-03 08:13
你是否曾经：
看了各种 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]
参考资料
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
[25]证明 JS 和 TS 类型编程是图灵完备的: https://juejin.cn/post/6927088564194770951