你是否曾经:
- 看了各种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; - github.com/type-challe…
- Dependent Type: - TypeScript 类型技巧 - 多参数类型约束; - Typescript Tips: 动态重载实现廉价版dependent type
- 关于交叉类型和函数重载: - TypeScript union function types
- 关于TS图灵完备:证明 JS 和 TS 类型编程是图灵完备的 欢迎关注「 字节前端 ByteFE 」
简历投递联系邮箱「tech@bytedance.com」