如果評定前端在最近五年的重大突破，`Typescript`肯定能名列其中，重大到各大技術論壇、大廠面試都認為`Typescript`應當是前端的一項必會技能。作為一名訊息閉塞到被同事調侃成“新石器時程式碼農”的我，也終於在2019年底上車了`Typescript`。使用的一年間整理了許多的筆記和程式碼片段，花了一段時間整理成了下文。 本文不是教程，主要目的是分享我個人在使用`Typescript`開發1年期間的一些理解和程式碼片段，因此文章內容主要圍繞對某些特性做的研究和理解。也希望能幫到一些同在學習使用`Typescript`的小夥伴，如有錯誤遺漏也希望能夠指出。 ### 基礎資料型別 `Javascript`一共有6種基礎型別：`String`/`Number`/`Boolean`/`Null`/`Undefined`/`Symbol`，分別對應`Typescript`中6種類型宣告：`string`/`number`/`boolean`/`null`/`undefined`/`symbol`。 基礎資料型別的型別宣告適用的幾條規則： 1. `Typescript`在編譯時會對程式碼做靜態型別檢查，多數情況下不支援隱式轉換，即`let yep: boolean = 1`會報錯 2. `Typescript`中的基礎型別宣告的首字母不區分大小寫，即`let num: number = 1`等同於`let num: Number = 1`，但是推薦小寫形式 3. `Typescript`允許變數有多種型別（即聯合型別），通過`|`連線即可，如`let yep: number | boolean = 1`，但是不建議這麼做 4. 型別宣告不佔用變數，因此`let boolean: boolean = true`是允許的，但是不建議這麼用 5. 預設情況下，除了`never`，`Typescript`可以把其他型別宣告（包括引用資料型別）的變數賦值為`null`/`undefined`/`void 0`而不報錯。但這肯定是錯誤的，建議在`tsconfig.json`中設定`"strictNullChecks": true`遮蔽掉這種情況 6. 對於**基礎型別**而言，`unknown`與`any`的最終結果是一致的 ```typescript // 字串型別宣告，單引號/雙引號不影響型別推斷 let str: string = 'Hello World'; // 數字型別宣告 let num: number = 120; // 這些值也是合法的數字型別 let nan: number = NaN; let max: number = Infinity; let min: number = -Infinity; // 布林型別宣告 let not: boolean = false; // Typescript只對結果進行檢查，!0最後得到true，因此不會報錯 let yep: boolean = !0; // symbol型別宣告 let key: symbol = Symbol('key'); // never型別不能進行賦值 // 執行console.log(never === undefined)，執行結果為true let never: never; // 但即使never === undefined，賦值邏輯仍然會報錯 never = undefined; // 除了never，未開啟strictNullChecks時，其他型別變數賦值為null/undefined/void 0不報錯 let always: boolean = true; let isNull: null = null; // 不會報錯 always = null; isNull = undefined; ``` ### 引用資料型別 `Javascript`的引用資料型別有很多，比如`Array`/`Object`/`Function`/`Date`/`Regexp`等，與基礎型別不一樣的地方是，`Typescript`有些地方並不能簡單地與`Javascript`直接對應，部分的執行結果讓人摸不著頭腦。 在書寫規則上，除了`Object`以外，`Typescript`其他的引用資料型別宣告的首字母必須大寫，如`let lis