摘要：資源官網安裝參考什么是是一個弱類型的解釋性語言，無法在編譯環節進行靜態類型校驗，如果想也具備靜態類型檢查功能。那就得使用到由推出，官網是。

官網：https://flow.org/

安裝：https://flow.org/en/docs/inst...

參考：https://www.01hai.com/note/av... https://www.jianshu.com/p/868e0fe373ed

JavaScript是一個弱類型的解釋性語言，無法在編譯環節進行靜態類型校驗，如果想JS也具備靜態類型檢查功能。那就得使用到Flow,Flow由Facebook推出，官網是 https://flow.org/。Flow與微軟的TypeScript有些類似，但TypeScript其實像是另一門新語言，而Flow可以理解為一個工具，象vue2、react等都是基于Flow開發，所以很有必要了解一下Flow。

安裝方法：有npm和yarn兩種，yarn為facebook出品，現在好象更流行一些
安裝方式：全局安裝 yarn global add flow-bin
安裝過程：

$ yarn global add flow-bin
yarn global v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "flow-bin@0.89.0" with binaries:
      - flow
Done in 6.32s.

安裝位置：

$ yarn global bin
C:UsersAdministratorAppDataLocalYarnin
# 注意：npm全局安裝位置是C:UsersAdministratorAppDataRoaming
pm
# 注意：請將...Yarnin目錄添加到系統全局變量path中

cli命令說明：

$ flow --help  # 查看幫助信息
# flow 命令，實際上是調用的是C:UsersAdministratorAppDataLocalYarnDataglobal
ode_modulesflow-binflow-win64-v0.89.0flow.exe，不同操作系統調用的是不同的執行文件

工作目錄：切換到項目根目錄，我的是F:youshengyouselearn-flow
配置flow: 命令是$ flow init，它會在當前目錄下生成一個.flowconfig文件，內容如下

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

凡加Flow注釋的文件，以下稱flow文件，flow文件就是將// @flow或 /* @flow */加到js文件的最頂部。只有flow文件，flow進程才會在后臺監視這些文件，當有類型檢查時，有錯誤它就會報錯
準備第1個js文件: 內容如下

// @flow
function square(n:number): number {
    return n * n;
}

square("2")

執行 flow check，報錯如下：

$ flow check
Error ---------------------------------------------------------------------------- a.js:6:8

Cannot call `square` with `"2"` bound to `n` because string [1] is incompatible with number [2].

   a.js:6:8
   6| square("2")
             ^^^ [1]

References:
   a.js:2:19
   2| function square(n:number): number {
                        ^^^^^^ [2]

Found 1 error

將square("2")改為square(2)再flow check看下

$ flow check
Found 0 errors

或者將// @flow去掉，都會提示Found 0 errors

啟動: flow status
停止: flow stoop

function square(n:number): number {中的類型標注，如:number，含有這樣的js文件，事實上運行起來會報錯的，不論是在nodejs還是瀏覽器中，現在在nodejs中運行測試下

$ node a.js
F:youshengyousedela.js:2
function square(n:number): number {
                 ^

SyntaxError: Unexpected token :
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)

將兩個:number去掉再測試下，不會報錯。所以說flow文件是兩個過程，編程時加上類型檢查，最后成品代碼中，得將所有的類型約束要去掉，去掉這個過程肯定不能人工操作，有相應的程序處理。目前有兩個方法去掉類型注解，一是包flow-remove-types，二是在babel中去掉

官方文檔：https://flow.org/en/docs/tool...

安裝

# 如果沒有package.json文件，先生成
yarn add --dev flow-remove-types
# or
npm install --save-dev flow-remove-types

去類型

# 為了方便，先將a.js移到src目錄下
$ yarn run flow-remove-types src/ -d dist/
yarn run v1.12.3
$ F:youshengyousedel
ode_modules.binflow-remove-types src/ -d dist/
srca.js
 ? dista.js
Done in 0.30s.

去類型前

// @flow
function square(n:number): number {
    return n * n;
}

square(2)

去類型后

//      
function square(n       )         {
    return n * n;
}

square(2)

安裝

yarn add --dev babel-cli            # 凡需要在命令行執行babel，得安裝babel-cli
yarn add --dev babel-preset-flow    # 目的就是去除類型

提示： babel在沒有配置時，也不認識類型，也會報錯，如沒有配置就轉碼，會報錯如下

$ ./node_modules/.bin/babel src -d dist
SyntaxError: src/a.js: Unexpected token, expected , (2:17)
  1 | // @flow
> 2 | function square(n:number): number {
    |                  ^
  3 |     return n * n;
  4 | }
  5 |

現在配置預置看下，新建配置文件 .babelrc，內容如下

{
  "presets": ["flow"]
}

再執行

$ ./node_modules/.bin/babel src -d dist
srca.js -> dista.js

沒有報錯，打開dist/a.js看下，內容如下

function square(n) {
    return n * n;
}

square(2);

類型約束全部去掉了。查看flow預置源碼，其實它只是包裝了@babel/plugin-transform-flow-strip-types這個插件而已，干活的是這個插件，打開源碼，其實比較好理解，就是刪除// @flow及類型

上面使用flow check來進行類型檢查，不是很方便，我想babel的插件來進行類型檢查，并在編輯器如vs code中自動檢查，這樣效率就會高很多，這就要用到插件babel-plugin-typecheck，它與預置flow的功能完全不一樣，babel-plugin-typecheck是檢查代碼中的類型是否有錯，babel-preset-flow是負責刪除類型的，這樣js代碼在執行時就好象從來沒有加過類型一樣。

在VS Code中搜索flow，發現有vscode-flow-ide、Flow-Language-Support兩個插件，在這里以vscode-flow-ide為例
先安裝vscode-flow-ide
條件：

項目根目錄有配置文件.flowconfig

nodejs添加到了環境變量path中

全局或項目內安裝了flow,推薦全局安裝flow-bin

配置(默認就行)
VS Code左下角管理/設置/User Settings/Extensions/Flow-IDE Configurations(只有啟用后才能配置，否則找不到這項)，下面是文字版，實際上在面板中就可以設置

flowide.enable: 啟用/關閉

flowide.pathToFlow: Absolute path to the Flow executable. Set it only if the default behaviour of the extension doesn"t work out for you. The extension will try first to read it from local node_modules/flow-bin or globally if not otherwise set here.

flowide.useCodeSnippetsOnFunctionSuggest - Add the function paramters when selecting a function to autocomple.

重啟vs Code，就會發現可以報錯了，現在可以去掉頂部的// @flow及傳遞不合要求的參數測試下。

如果在problem窗口有錯誤，[ts]"types" can only be used in a .ts file. 8010，請在擴展中找到typescript，找到"javascript.validate.enable": false

類型檢查盡量在編輯器中設置

刪除類型盡量在babel中自動完成