用法
一旦你已經安裝 Flow,你會想要了解如何使用 Flow 在最基本的層級。對於大多數新的 Flow 專案,你會遵循這個一般模式
- 初始化你的專案使用
flow init
。 - 使用
flow
啟動Flow 背景程式。 - 決定 Flow 會監控哪些檔案使用
// @flow
。 - 撰寫 Flow 程式碼給你的專案。
- 檢查你的程式碼是否有類型錯誤。
初始化你的專案
準備一個專案給 Flow 只需要一個指令
flow init
在你的專案最上層執行這個指令來建立一個空的檔案,稱為 .flowconfig
。在最基本的層級,.flowconfig
會告訴 Flow 背景程式從哪裡開始檢查 Flow 程式碼是否有錯誤。
這樣就完成了。你的專案現在已經啟用 Flow。
你的專案有一個空的
.flowconfig
檔案是很常見的。然而,你可以透過新增到.flowconfig
的選項,用許多方式設定和自訂 Flow。
執行 Flow 背景程式
Flow 的核心優點是它能快速檢查程式碼中的錯誤。啟用專案的 Flow 後,即可開始讓 Flow 以增量方式快速檢查程式碼的程序。
flow status
此指令會先啟動背景程序,檢查所有 Flow 檔案 的錯誤。背景程序會持續執行,監控程式碼的變更,並以增量方式檢查這些變更的錯誤。
您也可以輸入
flow
來達成與status
相同的效果,因為status
是flow
二進位檔的預設旗標。
任何時間只會執行一個背景程序,因此如果您執行
flow status
多次,它會使用同一個程序。
若要停止背景程序,請執行
flow stop
。
準備 Flow 程式碼
Flow 背景程序會監控所有 Flow 檔案。不過,它如何知道哪些檔案是 Flow 檔案,因此應該檢查?在 JavaScript 檔案的 任何程式碼之前放置下列旗標,是程序用來回答此問題的旗標。
1// @flow
此旗標的格式為一般 JavaScript 註解,並註解為 @flow
。Flow 背景程序會收集所有具有此旗標的檔案,並使用所有這些檔案中可用的類型資訊,以確保一致性和無錯誤的程式設計。
您也可以使用
/* @flow */
格式作為旗標。
對於專案中沒有此旗標的檔案,Flow 背景程序會略過並忽略程式碼(除非您呼叫
flow check --all
,這超出了基本用法的範圍)。
撰寫 Flow 程式碼
現在所有設定和初始化都已完成,您已準備好撰寫實際的 Flow 程式碼。對於您已標記為 // @flow
的每個檔案,您現在擁有 Flow 的全部功能及其可用的類型檢查。以下是 Flow 檔案範例
1function foo(x: ?number): string {2 if (x) {3 return x; 4 }5 return "default string";6}
3:12-3:12: Cannot return `x` because number [1] is incompatible with string [2]. [incompatible-return]
請注意函數參數中新增的類型,以及函數末尾的回傳類型。從這段程式碼中,您可能會發現回傳類型有誤,因為函數也可以回傳一個數字。不過,您不必手動檢查程式碼,因為在您檢查程式碼時,Flow 背景處理程序會偵測到這個錯誤。
檢查您的程式碼
Flow 的優點在於,您可以近乎即時地取得程式碼狀態的回饋。在任何您想檢查錯誤的時間點,只要執行
# equivalent to `flow status`
flow
第一次執行時,Flow 背景處理程序會被產生,並且所有 Flow 檔案都會被檢查。然後,當您繼續迭代您的專案時,背景處理程序會持續監控您的程式碼,這樣當您再次執行 flow
時,更新的結果會近乎即時產生。
對於上述程式碼,執行 flow
會產生
3:12-3:12: Cannot return `x` because number is incompatible with string. [incompatible-return]