Typescript 边学边练

3,237 阅读2分钟

你是否曾经:

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

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

  • 适合对象:“掌握JS,看过TS的,打算加强理解的前端同学”
  • 看完收获:“掌握TS的若干核心知识点;体会类型体操的快乐”
  • 食用姿势:
    • 按题不定期食用(每个题都有涉及到相关知识点)
    • 食用顺序:关键词 -> 题目要求 -> 知识点 -> 解题 -> 答题链接 -> 参考答案 -> 参考JS -> 知识点
    • 场景和解答仅供参考,并不是“TS完备”的答案

题目汇总

序号标题难度指数关键词题目摘要
1.Extract🌟genericsunionextends从某联合类型中选出“和其他类型相交”一部分
2.Lookup🌟🌟genericsunionextends从某联合类型中选出“满足特定条件的”一部分
3.Chainable Option🌟🌟genericsrecursive使用递归使类型满足链式调用
4.SubType🌟🌟keyof给对象做merge操作
5.Change Argument🌟🌟🌟inferReturnTypeParameters操作函数的参数和返回值的类型
6.Underscore🌟🌟🌟Template Literal Typesrecursive下划线字符串转驼峰式
7.EventEmitter🌟🌟🌟🌟genericsfunction overloadIntersection通过泛型解决函数参数间的相互依赖
8.Permutation🌟🌟🌟🌟unionextendsnever全排列问题
9.Simple Vue🌟🌟🌟🌟🌟this模拟一个Vue的this操作
10.Union To Tuple🌟🌟🌟🌟🌟function overloadIntersection无序联合类型转有序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; - github.com/type-challe…
  12. Dependent Type: - TypeScript 类型技巧 - 多参数类型约束; - Typescript Tips: 动态重载实现廉价版dependent type
  13. 关于交叉类型和函数重载: - TypeScript union function types
  14. 关于TS图灵完备:证明 JS 和 TS 类型编程是图灵完备的 欢迎关注「 字节前端 ByteFE 」

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