眾所周知， js是弱類(lèi)型的語(yǔ)言，由此有了很多的優(yōu)點(diǎn)，也出現(xiàn)了大量由此導(dǎo)致的錯(cuò)誤，難以定位。當(dāng)然有類(lèi)似于ts之類(lèi)的語(yǔ)法糖來(lái)解決此問(wèn)題，ts因?yàn)槭菑腸#演變而來(lái)的，所以入門(mén)有一定的門(mén)檻，所以我們來(lái)一下flow這個(gè)更輕巧的工具。

先來(lái)看一下flow在vs code中的表現(xiàn)效果:

跟ts的提示類(lèi)似，它會(huì)實(shí)時(shí)檢測(cè)所有的包含flow注釋的文件，在vscode中需要安裝Flow Language Support插件.

如何安裝

安裝過(guò)程可以使用yarn和npm安裝，推薦使用yarn，因?yàn)榘惭b起來(lái)會(huì)更快。

yarn add --dev @babel/core @babel/cli @babel/preset-flow

　然后在.babelrc中添加此插件

{
 "presets": ["@babel/preset-flow"]
}

　添加flow-bin的依賴(lài)

yarn add --dev flow-bin

　執(zhí)行flow:

yarn run flow

　　執(zhí)行成功后，會(huì)在后臺(tái)啟動(dòng)一個(gè)進(jìn)程進(jìn)行監(jiān)聽(tīng)，如果你已經(jīng)安裝了vscode的插件的話(huà)，可以忽略這一步，插件會(huì)自動(dòng)啟用flow.

　使用強(qiáng)類(lèi)型

做完上面這些后，你就可以在你的js文件中使用強(qiáng)類(lèi)型來(lái)約束你的代碼了，在需要使用flow的文件頭部添加/ / @flow

// @flow
function foo(x: ?number): string {
 if (x) {
  return x;
 }
 return "default string";
}

然后運(yùn)行 yarn run flow 　你就可以看到如下的輸出

test.js:5
 5:   return x;
        ^ number. This type is incompatible with the expected return type of
 3: function foo(x: ?number): string {
                ^^^^^^ string

如果你使用vscode的插件，就會(huì)在保存的時(shí)候自動(dòng)提示這些錯(cuò)誤出來(lái)，如第一張示例圖片那樣。

相關(guān)資料：

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

在線(xiàn)嘗試：https://flow.org/try/

總結(jié)

以上所述是小編給大家介紹的使用flow來(lái)規(guī)范javascript的變量類(lèi)型,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論