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」