在開始之前,我們先看一個例子:
```
function foo(x) {
return x + 666;
}
foo('HelloWorld!')
```
上面的函數中,我們希望傳入的`x`這個參數是個數字類型,但是很多時候都不是像我們希望的那樣。在JavaScript語言中,加號(+)除了作為數字的加運算外,也可以當作字符串的連接運算。如果傳入的不是數字類型而是字符串類型,則結果卻成了字符串拼接,想當然這并不是我們想要的結果。
于是,我們的主角就要出場了~
[Flow](https://flowtype.org/)是個JavaScript的靜態類型檢查工具,由Facebook出品的開源碼項目。
> 所謂類型檢查,就是在編譯期盡早發現(由類型錯誤引起的)bug,又不影響代碼運行(不需要運行時動態檢查類型),使編寫js具有和編寫Java等強類型語言相近的體驗。
> 它可以:
> 1.使得大型項目可維護
> 2.增加代碼的可讀性
> 3.通常會有更好的IDE支持
Flow這類解決方案的出現,是因為JavaScript是一種弱(動態)數據類型的語言,弱(動態)數據類型代表在代碼中,變量或常量會自動依照賦值變更數據類型,而且類型種類也很少,這是直譯式腳本語言的常見特性,但有可能是優點也是很大的缺點。優點是容易學習與使用,缺點是像開發者經常會因為賦值或傳值的類型錯誤,造成不如預期的結果。并且,在一個較大的項目中就會發現這其實是一件挺糟糕的特性,因為和你協作的程序員往往不太清楚你所寫的代碼到底哪種類型才是正確的,一般都是用詳盡的文字說明,來降低這個問題的發生,但JS語言本身無法有效阻止這些問題,而且編寫文字說明這個本身就很耗時間,對于閱讀者也一樣。
于是基于這個需求有了Typescript和Flow的產生。
Flow和Typescript都是給Javascript增加類型檢查的優秀解決方案,兩者的簡單對比如下:
| 工具 | Flow |TypeScript |
|--- | --- |--- |
| 公司 | Facebook | 微軟 |
| star | 19.7k | 50.7k |
| 文檔支持程度 | 中 | 高 |
| 優點 | 自由度高,易上手,老項目遷移成本低 | 工程化高,社區活躍,官方支持,學習曲線陡 |
| 代表框架 | Vue | Angular |
對于兩者使用場景差別,可以簡單總結為:對于新項目,可以考慮使用TypeScript或者Flow,對于已有一定規模的項目則建議使用Flow進行較小成本的逐步遷移來引入類型檢查。除了 Flow 的類型聲明之外,其他都是標準的 ES。萬一哪天不想用 Flow 了,用 babel-plugin-transform-flow-strip-types 轉一下,就得到符合規范的 ES。