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