上帝視角看 TypeScript

TypeScript 的學習資料很是多，其中也不乏不少優秀的文章和教程。可是目前爲止沒有一個我特別滿意的。緣由有：

• 它們大多數沒有一個清晰的主線，而是按照 API 組織章節的，內容在邏輯上比較零散。
• 大可能是「講是什麼，怎麼用「，而不是」講爲何，講原理「。
• 大多數內容比較枯燥，趣味性比較低。都是乾巴巴的文字，沒有圖片，缺少可以引發強烈共鳴的例子。

所以個人想法是作一套不一樣市面上大多數的 TypeScript 學習教程。以人類認知的角度思考問題，學習 TypeScript，經過通俗易懂的例子和圖片來幫助你們創建 TypeScript 世界觀。 而本篇文章則是這個系列的開篇。

系列安排：

• 上帝視角看 TypeScript（就是本文）
• TypeScript 類型系統
• 什麼是 types？什麼是 @types？
• 類型推導， 類型斷言與類型保護
• 你不知道的 TypeScript 泛型（萬字長文，建議收藏）（已發佈）
• TypeScript 練習題
• TypeScript 配置文件該怎麼寫？
• TypeScript 是如何與 React，Vue，Webpack 集成的？

目錄未來可能會有所調整。

注意，個人系列文章基本不會講 API，所以須要你有必定的 TypeScript 使用基礎，推薦兩個學習資料。

• 深刻理解 TypeScript
• 官方文檔

結合這兩個資料和個人系列教程，掌握 TypeScript 指日可待。

接下來，咱們經過幾個方面來從宏觀的角度來看一下 TypeScript。

從輸入輸出上來看

若是咱們把 Typescript 編譯器當作一個黑盒的話。其輸入則是使用 TypeScript 語法書寫的文本或者文本集合。

（文本）

若是幾個文本有引用關係，好比 a.ts 依賴 foo.ts 和 bar.ts，其就是一個文本集合。

（文本集合）

輸出是編譯以後的 JS 文件 和 .d.ts 的聲明文件。

其中 JS 是未來須要運行的文件，而 .d.ts 聲明文件則是 ts 文件中的類型聲明，這個類型聲明就是你在 ts 文件中聲明的類型和 TypeScript 類型推導系統推導的類型。固然你也能夠本身寫 .d.ts 聲明文件。

從功能上來看

從宏觀的視角來看，TypeScript 的功能就是：

• 提供了豐富的類型系統。

最簡單的就是 變量名:類型 = 值

const a: Number = 1;

除了這些基本類型，還提供了函數類型，複合類型等。

• 提供了類型操做 API。TypeScript 不但提供內置類型，用戶也能夠利用集合操做和泛型對類型操做從而生成新的類型。

• 對每一種類型的屬性和方法都進行了定義。

好比 String 類型有 toString 方法，可是沒有 toFixed 方法，這就是 lib.d.ts 定義的。這樣我在 String 類型的變量上使用 toFixed 方法就會報錯，達到了「類型檢查」的做用。

小提示：lib.d.ts 的內容主要是一些變量聲明（如：window、document、math）和一些相似的接口聲明（如：Window、Document、Math）。 你能夠經過 --noLib 來關閉這一功能

• 提供了模塊系統（module，namespace）。
• 提供了更加方面的 API，好比 class（這在 ES6 class 出來以前尤爲好用），裝飾器等。
• 。。。

TypeScript 編譯器是如何工做的？

上面已經討論了 TypeScript 編譯器的輸入和輸出。那黑盒內部是怎麼工做呢？這裏我簡單介紹一下：

• TypeScript 文本首先會被解析爲 token 流。這個過程比較簡單，就是單純地按照分隔符去分割文本便可。

• 接着 token 流會被轉換爲 AST，也就是抽象語法樹。

• binder 則根據 AST 信息生成 Symbol（TypeScript 中的一個數據結構）。拿上面的圖來講，就是 number 節點。
• 當咱們須要類型檢查的時候， checker 會根據前面生成的 AST 和 symbols 生成類型檢查結果。
• 當咱們須要生成 JS 文件的時候，emitter 一樣會根據前面生成的 AST 和 symbols 生成 JS 文件。

完整圖：

總結

總的來講，TypeScript 就是一門語言，和 Java，Python，C++ 等相似。只不過這門語言主要目標就是爲了彌補 JavaScript 弱類型帶來的問題的。所以設計語言的出發點就是：

• 靜態類型系統
• 能夠編譯成 JavaScript

所以 TypeScript 是一門最終編譯爲 JavaScript 的語言（固然還有類型文件）。既然是一門語言，就涉及詞法分析，語法分析等流程。因爲相對 JavaScript 增長了不少功能， 其中最主要的就是類型系統。所以 TypeScript 的分析工做要比 JavaScript 更加複雜， 集中體如今 binder 和 checker 部分。

因爲提供了靜態類型， 所以就須要提供一些內置類型給咱們用，好比 number，string，Array 等。可是這並不能知足咱們的全部需求，咱們須要自定義類型，所以有了 type，有了 interface 等。後來咱們又發現自定義的類型重複代碼太多， 要是類型也能夠經過編程生成新的類型就行了，因而有了集合運算和泛型。

代碼都放到一塊兒不方便維護，要是能夠放到不一樣文件，須要用的時候組裝起來就行了，因而有了模塊化。我用了別人的用 TypeScript 開發的庫，若是也能有類型校驗就行了，因而有了 types。

。。。

其實這些都是有因果關係的，若是你能夠緊緊地掌握這些因果關係，那麼學起來還不是易如反掌？

相關閱讀

• TypeScript 編譯原理
• Bring your own TypeScript with more internal definitions
• Compiler Internals
• TypeScript 編譯器是用 TypeScript 寫的，那是先有編譯器仍是 TS？

點關注，不迷路

你們也能夠關注個人公衆號《腦洞前端》獲取更多更新鮮的前端硬核文章，帶你認識你不知道的前端。

知乎專欄【 Lucifer - 知乎】