- flow 是 Facebook 出品的 JavaScript 靜態(tài)類型檢查工具。 vue 的源碼利用了 flow 做了靜態(tài)檢查.
為什么用 flow
- JavaScript 是動態(tài)類型語言，它的靈活性很高，但是其副作用就是會容易寫出非常隱蔽的有隱患的代碼。
- 并且類型檢查是當(dāng)前動態(tài)類型語言的一個發(fā)展趨勢，什么是類型檢查？ -> 就是在編譯的時候盡早發(fā)現(xiàn) bug, 又不會影響代碼的運行。
- 當(dāng)項目越復(fù)雜的時候，就越需要通過一些工具來檢測項目的維護性，代碼的可讀性。vue 在重構(gòu) 2.0 的時候，在 ES2015 的基礎(chǔ)上，除了用 ESLint 保證代碼風(fēng)格更以外，也引入了 flow 做靜態(tài)類型檢查。為什么選擇 flow ，主要是因為 Babel 和 ESLint 都有對應(yīng)的 flow 插件的支持語法。
flow 的使用方式
- 類型推斷: 通過變量的使用上下文來推斷變量類型，然后根據(jù)這些推斷來檢查類型。
- 類型注釋: 事先注釋好我們期待的類型，flow 會基于這些注釋類判斷
類型判斷
-
它不需要任何代碼修改即可進行類型檢查。
/*@flow*/ function split(str) { return str.split(' ') } split(11) flow 檢查上述代碼就會報錯，因為函數(shù)期待的參數(shù)是字符串，而不是數(shù)字
類型注釋
-
類型推斷是 flow 最有用的特性之一，不需要寫類型注釋就能獲取有用的反饋。但在有些場景下，添加類型注釋可以提供更好的檢查依據(jù)。
例如: function add(x, y) { return x + y; } add('你好', 66) flow 檢查上述代碼的時候會檢測不出任何錯誤，在語法的層面考慮，+ 即可以用在字符串上，也可以用在數(shù)字上，而上述并沒有指出必須為數(shù)字。
-
這種情況下，就可以借助類型注釋來指明期望的類型，類型注釋以冒號 : 開頭
function add(x: number, y: number): number { return x + y; } add('你好', 66) 這樣 flow 就能檢查出錯誤，因為我們期待的參數(shù)類型是數(shù)字。
數(shù)組
/*@flow*/
const arr: Array<number> = [1, 2, 3]
arr.push('haha')
- 數(shù)組類型注釋的格式是 Array<T> ，T 表示數(shù)組中每項的數(shù)據(jù)類型。
類和對象
/*@flow*/
const foo: ?string = null
- foo 可以為字符串，也可以為 null。
