flow的簡單使用

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 的功能很強大,想了解更多內容的話官方非常的詳細。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容