# Flow ## Flow簡介 Flow 是一個針對 JavaScript 代碼的靜態類型檢查器。它是在Facebook開發的，經常和React一起使用。 它可以讓你使用特殊的類型語法來注釋變量，函數和React組件，并盡早地發現錯誤。 ## 安裝Flow 使用yarn安裝 ``` yarn add --dev flow-bin yarn run flow init ``` 使用npm安裝 ``` npm install --save-dev flow-bin npm run flow init ``` 然后，在 `package.json` 中添加 `flow` ```json { "scripts": { "flow": "flow", // ... } } ``` ## 從編譯過的代碼中剝離 Flow 語法 Flow 通過使用特殊的語法為類型注釋擴展了 JavaScript 語言。 然而，瀏覽器并不知道這個語法，所以需要確保它不會在發送到瀏覽器的已編譯的 JavaScript 包中結束。 如果項目是使用 `Create React App` 建立的，那么，不需要做更多的操作， `Flow` 此時已經被默認剝離。 如果不是，則需要手動配置一下: 首先安裝 `babel-preset-flow` ``` yarn add --dev babel-preset-flow # yarn # npm install --save-dev babel-preset-flow # npm ``` 然后將 flow preset 加入你的 Babel 配置。打開 .babelrc 文件配置 Babel，修改為: ```json { "presets": [ "flow", "react" ] } ``` >[warning] 注意：Flow 不需要 react preset，但他們經常在一起使用。 Flow 本身就理解 JSX 語法。 ## 添加 Flow 類型注釋 默認情況下， Flow 僅檢查包含此批注的文件： ``` // @flow ``` 通常它被放置在文件的頂部。 嘗試將其添加到項目中的某些文件中，然后運行 yarn flow 或 npm run flow 來查看 Flow 是否已經發現了一些問題。 ## 運行 Flow ``` yarn flow # yarn # npm run flow # npm ``` 如果運行成功，控制臺將會輸出如下信息: ``` No errors! ? Done in 0.17s. ``` 否則將收到報錯信息。 # 參考資料 [Flow官網](https://flow.org/en/docs/getting-started/)