Typescript 邊學邊練
你是否曾經(jīng)：
看了各種 TS 文檔，寫起來還是似懂非懂； 接觸了一些 TS 關(guān)鍵字，用起來不太熟練，缺乏明確的理論參考； TS 寫著寫著降級到了 JS； 類型在不知道什么地方就斷了層，再也接不上了； 基于我們踩坑 TS 的過程，總結(jié)了這篇文章。通過邊學邊練，從問題到解答到知識點，帶你體驗類型體操的快樂，并把類型體操應用在日常開發(fā)中。
適合對象：“掌握 JS，看過 TS 的，打算加強理解的前端同學” 看完收獲：“掌握 TS 的若干核心知識點；體會類型體操的快樂” 食用姿勢： 按題不定期食用（每個題都有涉及到相關(guān)知識點） 食用順序：關(guān)鍵詞 -> 題目要求 -> 知識點 -> 解題 -> 答題鏈接 -> 參考答案 -> 參考 JS -> 知識點 場景和解答僅供參考，并不是“TS 完備”的答案
題目匯總
| 序號 | 標題 | 難度指數(shù) | 關(guān)鍵詞 | 題目摘要 |
|---|---|---|---|---|
| 1. | Extract[1] | ?? | generics、union、extends | 從某聯(lián)合類型中選出“和其他類型相交”一部分 |
| 2. | Lookup[2] | ???? | generics、union、extends | 從某聯(lián)合類型中選出“滿足特定條件的”一部分 |
| 3. | Chainable Option[3] | ???? | generics、recursive | 使用遞歸使類型滿足鏈式調(diào)用 |
| 4. | SubType[4] | ???? | keyof | 給對象做 merge 操作 |
| 5. | Change Argument[5] | ?????? | infer、ReturnType、Parameters | 操作函數(shù)的參數(shù)和返回值的類型 |
| 6. | Underscore[6] | ?????? | Template Literal Types、recursive | 下劃線字符串轉(zhuǎn)駝峰式 |
| 7. | EventEmitter[7] | ???????? | generics、function overload、Intersection | 通過泛型解決函數(shù)參數(shù)間的相互依賴 |
| 8. | Permutation[8] | ???????? | union、extends、never | 全排列問題 |
| 9. | Simple Vue[9] | ?????????? | this | 模擬一個 Vue 的 this 操作 |
| 10. | Union To Tuple[10] | ?????????? | function overload、Intersection | 無序聯(lián)合類型轉(zhuǎn)有序 tuple |
參考鏈接
類型分發(fā)：Documentation - TypeScript 2.8[11] 泛型：Documentation - Generics[12] 遞歸類型：Documentation - TypeScript 3.7[13] 函數(shù)中的泛型：Documentation - More on Functions[14] keyof 關(guān)鍵字：Documentation - TypeScript 2.1[15] this 類型：Documentation - Utility Types[16] infer 關(guān)鍵字：infer | 深入理解 TypeScript[17] Rest/Spread Parameters:Documentation - TypeScript 3.0[18] 模板字符串：Documentation - TypeScript 4.1[19] 字符串部分內(nèi)置類型：Documentation - Template Literal Types[20] never 判斷： Conditional Types - Checking extends never[21]; https://github.com/type-challenges/type-challenges/issues/614 Dependent Type: TypeScript 類型技巧 - 多參數(shù)類型約束[22]； Typescript Tips: 動態(tài)重載實現(xiàn)廉價版 dependent type[23] 關(guān)于交叉類型和函數(shù)重載： TypeScript union function types[24] 關(guān)于 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 類型技巧 - 多參數(shù)類型約束: https://zhuanlan.zhihu.com/p/95828198
[23]Typescript Tips: 動態(tài)重載實現(xiàn)廉價版 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