Flow是JavaScript程式碼的靜態型別檢查器。它可以幫助您提高工作效率。讓您的程式碼更快，更智慧，更自信，更大規模。

Flow的使用

Flow 安裝

安裝Flow

npm i flow-bin -D

安裝Babel

npm i babel-cli babel-preset-flow

Flow 的命令列工具的使用

在package.json中新增相應的scripts執行flow命令, 轉換src/目錄下的js程式碼, 並且輸出到lib/目錄下

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "flow": "flow",
    "init": "flow init"
  }
}
 

新建.babelrc檔案, babel配置檔案

{
    "presets": [
        "flow"
    ]
}

先執行初始化命令, 專案目錄會生產一個.flowconfig檔案, 可以配置那些需要轉換, 那些不需要

npm run init

使用npm執行flow命令

npm flow

命令列工具很少使用，因為便捷程度較低，最常見的使用方式為IDE外掛（VSCode等）

VSCode外掛名稱為：Flow Language Support

為程式碼新增Flow型別

在程式碼中新增型別的方式有兩種：

註釋型：這種方式不會對程式碼產生任何影響，JS程式碼可以正常執行，但是程式碼結構會因為註釋內容的存在降低可讀性。
程式碼型（推薦）：這種方式會改變JS程式碼結構，需要配合babel使用才可正常執行

註釋型演示：

// @flow
function test(a /*: number*/, b /*: number*/) /*: number*/{
  return a + b;
}
// 宣告test函式的a,b引數型別事number, 返回值也是number

程式碼型演示：

// @flow
function test(a: number, b: number): number{
  return a + b;
}
// 宣告test函式的a,b引數型別事number, 返回值也是number

不論哪種形式，都需要為檔案新增 // @flow 標記, 這樣後臺的flow程序才會對該檔案進行型別檢查
// @flow 標記不能少

如果不想給所有檔案都新增標記，又想flow對檔案進行型別檢查則在啟動flow時需要使用命令

flowchat check --all

Flow中的型別