上帝視角看 TypeScript

TypeScript 的學習資料非常多，其中也不乏很多優(yōu)秀的文章和教程。但是目前為止沒有一個我特別滿意的。原因有：

• 它們大多數(shù)沒有一個清晰的主線，而是按照 API 組織章節(jié)的，內容在邏輯上比較零散。
• 大多是“講是什么，怎么用“，而不是”講為什么，講原理“。
• 大多數(shù)內容比較枯燥，趣味性比較低。都是干巴巴的文字，沒有圖片，缺乏能夠引起強烈共鳴的例子。

因此我的想法是做一套不同市面上大多數(shù)的 TypeScript 學習教程。以人類認知的角度思考問題，學習 TypeScript，通過通俗易懂的例子和圖片來幫助大家建立 TypeScript 世界觀。而本篇文章則是這個系列的開篇。

系列安排：

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

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

注意，我的系列文章基本不會講 API，因此需要你有一定的 TypeScript 使用基礎，推薦兩個學習資料。

• 深入理解 TypeScript??https://jkchao.github.io/typescript-book-chinese/
• 官方文檔?https://www.typescriptlang.org/docs/home

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

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

從輸入輸出上來看

如果我們把 Typescript 編譯器看成一個黑盒的話。其輸入則是使用 TypeScript 語法書寫的文本或者文本集合。

（文本）

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

（文本集合）

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

其中 JS 是將來需要運行的文件，而 .d.ts 聲明文件則是 ts 文件中的類型聲明，這個類型聲明就是你在 ts 文件中聲明的類型和 TypeScript 類型推導系統(tǒng)推導的類型。當然你也可以自己寫 .d.ts 聲明文件。

從功能上來看

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

• 提供了豐富的類型系統(tǒng)。

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

const?a:?Number?=?1;

除了這些基本類型，還提供了函數(shù)類型，復合類型等。

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

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

比如 String 類型有 toString 方法，但是沒有 toFixed 方法，這就是 lib.d.ts 定義的。這樣我在 String 類型的變量上使用 toFixed 方法就會報錯，達到了“類型檢查”的作用。

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

• 提供了模塊系統(tǒng)（module，namespace）。
• 提供了更加方面的 API，比如 class（這在 ES6 class 出來之前尤其好用），裝飾器等。
• 。。。

TypeScript 編譯器是如何工作的？

上面已經(jīng)討論了 TypeScript 編譯器的輸入和輸出。那黑盒內部是怎么工作呢？這里我簡單介紹一下：

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

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

• binder 則根據(jù) AST 信息生成 Symbol（TypeScript 中的一個數(shù)據(jù)結構）。拿上面的圖來說，就是 number 節(jié)點。
• 當我們需要類型檢查的時候， checker 會根據(jù)前面生成的 AST 和 symbols 生成類型檢查結果。
• 當我們需要生成 JS 文件的時候，emitter 同樣會根據(jù)前面生成的 AST 和 symbols 生成 JS 文件。

完整圖：

總結

總的來說，TypeScript 就是一門語言，和 Java，Python，C++ 等類似。只不過這門語言主要目標就是為了彌補 JavaScript 弱類型帶來的問題的。因此設計語言的出發(fā)點就是：

• 靜態(tài)類型系統(tǒng)
• 可以編譯成 JavaScript

因此 TypeScript 是一門最終編譯為 JavaScript 的語言（當然還有類型文件）。既然是一門語言，就涉及詞法分析，語法分析等流程。由于相對 JavaScript 增加了很多功能， 其中最主要的就是類型系統(tǒng)。因此 TypeScript 的分析工作要比 JavaScript 更加復雜， 集中體現(xiàn)在 binder 和 checker 部分。

由于提供了靜態(tài)類型， 因此就需要提供一些內置類型給我們用，比如 number，string，Array 等。但是這并不能滿足我們的所有需求，我們需要自定義類型，因此有了 type，有了 interface 等。后來我們又發(fā)現(xiàn)自定義的類型重復代碼太多， 要是類型也可以通過編程生成新的類型就好了，于是有了集合運算和泛型。

代碼都放到一起不方便維護，要是可以放到不同文件，需要用的時候組裝起來就好了，于是有了模塊化。我用了別人的用 TypeScript 開發(fā)的庫，如果也能有類型校驗就好了，于是有了 types。

。。。

其實這些都是有因果關系的，如果你可以牢牢地掌握這些因果關系，那么學起來還不是易如反掌？

相關閱讀

• TypeScript 編譯原理?https://jkchao.github.io/typescript-book-chinese/compiler/overview.html
• Bring your own TypeScript with more internal definitions?https://github.com/basarat/byots
• Compiler Internals?https://github.com/microsoft/TypeScript/wiki/Compiler-Internals
• TypeScript 編譯器是用 TypeScript 寫的，那是先有編譯器還是 TS?https://github.com/azl397985856/fe-interview/issues/135