摘要：資源官網(wǎng)安裝參考什么是是一個(gè)弱類(lèi)型的解釋性語(yǔ)言，無(wú)法在編譯環(huán)節(jié)進(jìn)行靜態(tài)類(lèi)型校驗(yàn)，如果想也具備靜態(tài)類(lèi)型檢查功能。那就得使用到由推出，官網(wǎng)是。

官網(wǎng)：https://flow.org/

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

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

JavaScript是一個(gè)弱類(lèi)型的解釋性語(yǔ)言，無(wú)法在編譯環(huán)節(jié)進(jìn)行靜態(tài)類(lèi)型校驗(yàn)，如果想JS也具備靜態(tài)類(lèi)型檢查功能。那就得使用到Flow,Flow由Facebook推出，官網(wǎng)是 https://flow.org/。Flow與微軟的TypeScript有些類(lèi)似，但TypeScript其實(shí)像是另一門(mén)新語(yǔ)言，而Flow可以理解為一個(gè)工具，象vue2、react等都是基于Flow開(kāi)發(fā)，所以很有必要了解一下Flow。

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

$ 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
# 注意：請(qǐng)將...Yarnin目錄添加到系統(tǒng)全局變量path中

cli命令說(shuō)明：

$ flow --help  # 查看幫助信息
# flow 命令，實(shí)際上是調(diào)用的是C:UsersAdministratorAppDataLocalYarnDataglobal
ode_modulesflow-binflow-win64-v0.89.0flow.exe，不同操作系統(tǒng)調(diào)用的是不同的執(zhí)行文件

工作目錄：切換到項(xiàng)目根目錄，我的是F:youshengyouselearn-flow
配置flow: 命令是$ flow init，它會(huì)在當(dāng)前目錄下生成一個(gè).flowconfig文件，內(nèi)容如下

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

凡加Flow注釋的文件，以下稱(chēng)flow文件，flow文件就是將// @flow或 /* @flow */加到j(luò)s文件的最頂部。只有flow文件，flow進(jìn)程才會(huì)在后臺(tái)監(jiān)視這些文件，當(dāng)有類(lèi)型檢查時(shí)，有錯(cuò)誤它就會(huì)報(bào)錯(cuò)
準(zhǔn)備第1個(gè)js文件: 內(nèi)容如下

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

square("2")

執(zhí)行 flow check，報(bào)錯(cuò)如下：

$ 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去掉，都會(huì)提示Found 0 errors

啟動(dòng): flow status
停止: flow stoop

function square(n:number): number {中的類(lèi)型標(biāo)注，如:number，含有這樣的js文件，事實(shí)上運(yùn)行起來(lái)會(huì)報(bào)錯(cuò)的，不論是在nodejs還是瀏覽器中，現(xiàn)在在nodejs中運(yùn)行測(cè)試下

$ 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)

將兩個(gè):number去掉再測(cè)試下，不會(huì)報(bào)錯(cuò)。所以說(shuō)flow文件是兩個(gè)過(guò)程，編程時(shí)加上類(lèi)型檢查，最后成品代碼中，得將所有的類(lèi)型約束要去掉，去掉這個(gè)過(guò)程肯定不能人工操作，有相應(yīng)的程序處理。目前有兩個(gè)方法去掉類(lèi)型注解，一是包flow-remove-types，二是在babel中去掉

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

安裝

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

去類(lèi)型

# 為了方便，先將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.

去類(lèi)型前

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

square(2)

去類(lèi)型后

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

square(2)

安裝

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

提示： babel在沒(méi)有配置時(shí)，也不認(rèn)識(shí)類(lèi)型，也會(huì)報(bào)錯(cuò)，如沒(méi)有配置就轉(zhuǎn)碼，會(huì)報(bào)錯(cuò)如下

$ ./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 |

現(xiàn)在配置預(yù)置看下，新建配置文件 .babelrc，內(nèi)容如下

{
  "presets": ["flow"]
}

再執(zhí)行

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

沒(méi)有報(bào)錯(cuò)，打開(kāi)dist/a.js看下，內(nèi)容如下

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

square(2);

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

上面使用flow check來(lái)進(jìn)行類(lèi)型檢查，不是很方便，我想babel的插件來(lái)進(jìn)行類(lèi)型檢查，并在編輯器如vs code中自動(dòng)檢查，這樣效率就會(huì)高很多，這就要用到插件babel-plugin-typecheck，它與預(yù)置flow的功能完全不一樣，babel-plugin-typecheck是檢查代碼中的類(lèi)型是否有錯(cuò)，babel-preset-flow是負(fù)責(zé)刪除類(lèi)型的，這樣js代碼在執(zhí)行時(shí)就好象從來(lái)沒(méi)有加過(guò)類(lèi)型一樣。

在VS Code中搜索flow，發(fā)現(xiàn)有vscode-flow-ide、Flow-Language-Support兩個(gè)插件，在這里以vscode-flow-ide為例
先安裝vscode-flow-ide
條件：

項(xiàng)目根目錄有配置文件.flowconfig

nodejs添加到了環(huán)境變量path中

全局或項(xiàng)目?jī)?nèi)安裝了flow,推薦全局安裝flow-bin

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

flowide.enable: 啟用/關(guān)閉

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，就會(huì)發(fā)現(xiàn)可以報(bào)錯(cuò)了，現(xiàn)在可以去掉頂部的// @flow及傳遞不合要求的參數(shù)測(cè)試下。

如果在problem窗口有錯(cuò)誤，[ts]"types" can only be used in a .ts file. 8010，請(qǐng)?jiān)跀U(kuò)展中找到typescript，找到"javascript.validate.enable": false

類(lèi)型檢查盡量在編輯器中設(shè)置

刪除類(lèi)型盡量在babel中自動(dòng)完成