TypeScript最近大火滩租，很多人在說它與JavaScript不同之處探膊，其中有一點(diǎn)必提的就是類型檢查杠愧。如果我不想用TS寫代碼，還想對原生的JavaScript做類型檢查逞壁，有沒有這樣的工具包呢流济？
FLow：https://flow.org/en/
Flow是由 facebook 開發(fā)的 JavaScript 靜態(tài)類型檢查工具锐锣。下面舉幾個(gè)例子，看看怎么使用绳瘟。
安裝使用
- npm init 生成 package.json
- npm install --save-dev @babel/core @babel/cli @babel/preset-flow
- 創(chuàng)建.babelrc雕憔，配置
{
"presets": ["@babel/preset-flow"]
}
- npm install --save-dev flow-bin
- 在package.json中的腳本中添加
"scripts": {
"flow":"flow",
}
- npm run flow init 初始化flow，生成.flowconfig
- 創(chuàng)建測試文件 test-flow.js糖声，添加代碼
function foo(x: ?number): number {
if (x) {
return x;
}
return 0;
}
foo('hi')
- 運(yùn)行 npm run flow
image.png
類型檢查成功斤彼！
幾個(gè)例子
- 混合類型的檢查
如果想要檢查的類型可能是 string 也可能是 number 怎么辦？Flow 也支持多種類型的檢查蘸泻。
function foo(value: string | number) {
return '' + value;
}
foo(123) // Works!
foo('hi') // Works!
foo(true) // Error!
- 可選類型
在代碼中傳遞 null 和 undefined 的很常見的琉苇，如何在這種情況下檢查類型呢。我們需要在類型前面加一個(gè)悦施？并扇，比如?number
// @flow
function foo(value: ?number) {
// ...
}
foo(42); // Works!
foo(); // Works!
foo(undefined); // Works!
foo(null); // Works!
foo("42"); // Error!
如果你的參數(shù)是一個(gè)對象，沒有屬性key抡诞，應(yīng)該怎么合理檢查呢穷蛹？
// @flow
function foo({ value }: { value?: ?number }) {
// ...
}
foo({ value: undefined }); // Works!
foo({}); // Works!
- 類檢查
// @flow
class Bar {
x: string;
y: string | number;
z: boolean;
constructor(x: string, y: string | number) {
this.x = x
this.y = y
this.z = false
}
}
var bar: Bar = new Bar('hello', 4)
- 自定義類型檢查
像 Vue 、React 這樣的框架不止有基本類型昼汗，肯定有自己定義的類型肴熏，那 Flow 是怎么執(zhí)行檢查的呢？
為了解決這類問題顷窒，F(xiàn)low 提出了一個(gè) libdef 的概念蛙吏，可以用來識別這些第三方庫或者是自定義類型。在.flowconfig 的 [libs] 部分用來描述包含指定庫定義的目錄蹋肮。
Vue 就是采用 Flow 進(jìn)行靜態(tài)類型檢查的出刷，在源碼目錄下可以看到一個(gè) .flowconfig 文件，[libs] 指向 flow 文件夾坯辩，打開文件夾馁龟，文件結(jié)構(gòu)是：
flow
├── compiler.js # 編譯
├── component.js # 組件
├── global-api.js # Global API
├── modules.js # 第三方庫
├── options.js # 選項(xiàng)
├── ssr.js # 服務(wù)端渲染
├── vnode.js # 虛擬 node
├── weex.js # weex
可以看到，Vue.js 有很多自定義類型的定義漆魔。
