由於 JavaScript 是偏向弱型別（weak type）的程式語言，因此天生缺少如 Java 一般的型別檢查功能。不過我們可以藉助 Flow 工具，為 JS 加上靜態資料類型檢查的功能。

安裝 Flow

先將 Flow 安裝至全域中，以便我們使用 flow 指令：

$ npm install flow-bin --global

安裝為專案開發環境相依套件：

$ npm install flow-bin --save-dev

設定 Flow

於專案根目錄中輸入指令來建立 .flowconfig 設定檔：

$ flow init

Visual Studio Code extension

Visual Studio Code（VSCode）可以再加裝 vscode-flow-ide 插件，讓我們可以在撰寫程式碼時就即時看到檢查提示。

vscode-flow-ide 必須先於全域或專案開發環境中安裝好 Flow，否則不會啟用。並且專案中必須有 Flow 的 .flowconfig 設定檔。

另外還須到 VSCode 的「喜好設定 -> 設定」（settings.json）將 VSCode 內建的 JavaScript 驗證關閉：

{
  "javascript.validate.enable": false
}

讓 ESLint 支援 Flow 語法

由於 Flow 的型別標示語法並不是 ECMAScript 標準，所以 ESLint 會在檢查時將所有 Flow 語法視為錯誤的 JS 語法。我們可以透過 eslint-plugin-flowtype 讓 ESLint 支援檢查 Flow 語法。

將 eslint-plugin-flowtype 安裝為專案開發環境相依套件：

$ npm install eslint-plugin-flowtype --save-dev

再安裝 babel-eslint 為專案開發環境相依套件：

$ npm install babel-eslint --save-dev

將以下 extends 及 plugins 屬性加入 .eslintrc.json 設定檔中：

{
  "extends": [
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "flowtype"
  ]
}

搭配 webpack 2

先將 Flow 安裝為專案開發環境相依套件：

$ npm install flow-bin --save-dev

讓 Babel 支援 Flow 語法

與 ESLint 的原因相同，Babel 也不支援 Flow 語法。須安裝 babel-preset-flow，讓 Babel 在轉譯程式碼前先將 Flow 語法移除。

安裝 babel-preset-flow 為專案開發環境相依套件：

$ npm install babel-preset-flow --save-dev

於 .babelrc 設定檔中加入以下 presets 屬性：

{
  "presets": ["flow"]
}

於 webpack 自動檢查型別

透過 flow-webpack-plugin 可以讓 webpack 在編譯打包前先使用 Flow 進行型別檢查。

安裝 flow-webpack-plugin 為專案開發環境相依套件：

$ npm install flow-webpack-plugin --save-dev

於 webpack 2 設定檔中的 plugins 加入插件：

const FlowwebpackPlugin = require('flow-webpack-plugin')

const webpackConfig = {
  plugins: [
    new FlowwebpackPlugin()
  ]
}

額外參考