使用flow來規(guī)范javascript的變量類型
眾所周知， js是弱類型的語言，由此有了很多的優(yōu)點，也出現(xiàn)了大量由此導(dǎo)致的錯誤，難以定位。當(dāng)然有類似于ts之類的語法糖來解決此問題，ts因為是從c#演變而來的，所以入門有一定的門檻，所以我們來一下flow這個更輕巧的工具。
先來看一下flow在vs code中的表現(xiàn)效果:
跟ts的提示類似，它會實時檢測所有的包含flow注釋的文件，在vscode中需要安裝Flow Language Support插件.
如何安裝
安裝過程可以使用yarn和npm安裝，推薦使用yarn，因為安裝起來會更快。
yarn add --dev @babel/core @babel/cli @babel/preset-flow
然后在.babelrc中添加此插件
{
"presets": ["@babel/preset-flow"]
}
添加flow-bin的依賴
yarn add --dev flow-bin
執(zhí)行flow:
yarn run flow
執(zhí)行成功后，會在后臺啟動一個進(jìn)程進(jìn)行監(jiān)聽，如果你已經(jīng)安裝了vscode的插件的話，可以忽略這一步，插件會自動啟用flow.
使用強(qiáng)類型
做完上面這些后，你就可以在你的js文件中使用強(qiáng)類型來約束你的代碼了，在需要使用flow的文件頭部添加/ / @flow
// @flow
function foo(x: ?number): string {
if (x) {
return x;
}
return "default string";
}
然后運行 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的插件，就會在保存的時候自動提示這些錯誤出來，如第一張示例圖片那樣。
相關(guān)資料：
flow官網(wǎng)：https://flow.org/en/
總結(jié)
以上所述是小編給大家介紹的使用flow來規(guī)范javascript的變量類型,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
- Angularjs上傳文件組件flowjs功能
- Flow之一個新的Javascript靜態(tài)類型檢查器
- JavaScript中的Repaint和Reflow用法詳解
- JavaScript靜態(tài)類型檢查工具FLOW簡介
- 有關(guān)javascript的性能優(yōu)化 (repaint和reflow)
- js中判斷變量類型函數(shù)typeof的用法總結(jié)
- javascript中對變量類型的判斷方法
- js判斷undefined變量類型使用typeof
- Js檢查變量類型的代碼()
- javascript 得到變量類型的函數(shù)
- js 變量類型轉(zhuǎn)換常用函數(shù)與代碼[比較全]
相關(guān)文章
這篇文章主要介紹了js+css實現(xiàn)上下翻頁相冊特效,相冊可以從上方或者下方隨意切換，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要內(nèi)容是對js生成隨機(jī)數(shù)方法的實例匯總，js生成隨機(jī)數(shù)主要用到了內(nèi)置的Math對象的random()方法，需要的朋友可以參考下2015-10-10
數(shù)組去重復(fù)是一個常見的需求，我們暫時考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，有各人總結(jié)也有網(wǎng)上熱心網(wǎng)友的方法，這里簡單地總結(jié)一下。2015-08-08
input file的默認(rèn)value清空與賦值方法
出于安全性考慮，JS是不能直接設(shè)置File的value值的，下面是我總結(jié)出來的方法2010-09-09
這篇文章主要介紹了JS小游戲之極速快跑源碼詳解,對游戲的主要流程及原理進(jìn)行了較為詳細(xì)的講解,并附有完整實例源碼,需要的朋友可以參考下2014-09-09
關(guān)于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實現(xiàn)復(fù)選框全選或反選
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)復(fù)選框全選或反選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JavaScript實現(xiàn)打開鏈接頁面的方式，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個常用的方法,用于遍歷數(shù)組或類數(shù)組對象中的每個元素,本文就來介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了分析ES5和ES6的apply區(qū)別，對ES6感興趣的同學(xué)，可以參考下2021-05-05