Flow 是 Facebook 旗下一個為 JavaScript 進行靜態類型檢測的檢測工具。它可以在 JavaScript 的項目中用來捕獲常見的 bugs,比如隱式類型轉換,空引用等等。
下面根據官網的介紹,簡單說下 flow 的簡單使用,更詳細高級的功能以及 Flow 的安裝方法,可以到官網上查看。
首先,我們需要創建一個簡單的項目,如下:
a. 創建目錄: mkdir testFlow
b. 進入目錄:cd testFlow
接著我們通過 flow init
命令對 Flow 進行初始化。這時我們可以通過 ls -a
來查看目錄,發現創建了一個 .flowconfig 文件,有了這個文件,我們就可以通過 check
命令來檢測和這個文件同級目錄以及子目錄上的 js 文件的語法問題了。
查看文件
現在我們可以使用命令:
flow check
進行文件的檢測了,不過現在沒有文件,所以會顯示 Found 0 errors。另外,這個命令每次執行都會重新檢測所有文件。但是我們在大的項目中,可能只想它 check 新添加的文件或者被修改的文件,Flow 允許你通過 client/server 的架構來啟動 Flow 服務器,讓它在后臺進行文件的監聽。方法很簡單,一條 flow
命令就能完成 Flow 服務器啟動,文件檢測,被更改文件的檢測,即第一次使用 flow
命令會啟動 Flow 服務器并且首次檢測文件,再次使用 flow
命令會連接 Flow 服務器并且檢測文件,之后使用 flow
命令時將會連接 Flow 服務器并且對修改過的文件進行檢測。如果想停止 Flow 服務器,通過
flow stop
即可。現在,我們創建一個 js 文件, 輸入如下內容:
/* @flow*/
function test(n: number){
var num = 3;
return num + n;
}
test('hello');
代碼的開頭通過 @flow
告訴 Flow 這個文件需要進行類型的檢測。下面,執行 flow check
命令進行文件檢測。
檢測文件
因為我們在定義函數的時候聲明了參數 n 是 number 類型,所以在調用處就可以清晰的看到顯示的錯誤情況了。如果我們就想讓 String 類型和 number 類型相加怎么辦,試試將參數的類型聲明去掉會是什么效果呢?如下:
/* @flow*/
function test(n){
var num = 3;
return num + n;
}
test('hello');
執行 flow check
命令進行文件檢測。
文件檢測
這次可以看到,沒有報錯。現在,假設我們既不想寫類型聲明,有想讓它檢測到錯誤,那又要怎么做呢?這時可以將
@flow
改為 @flow weak
,如下:
/* @flow weak*/
function test(n){
var num = 3;
return num + n;
}
test('hello');
執行 flow check
命令進行文件檢測。
文件檢測
從圖中可以看到檢測出了錯誤。
如果想讓 Flow 檢測所有文件,包括文件開始沒有使用
@flow
聲明的文件,可以使用 flow check --all
命令。Flow 的功能很強大,想了解更多內容的話官方非常的詳細。