使用flow來規(guī)范javascript的變量類型
眾所周知， js是弱類型的語言，由此有了很多的優(yōu)點，也出現(xiàn)了大量由此導致的錯誤，難以定位。當然有類似于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í)行成功后，會在后臺啟動一個進程進行監(jiān)聽，如果你已經安裝了vscode的插件的話，可以忽略這一步，插件會自動啟用flow.
使用強類型
做完上面這些后，你就可以在你的js文件中使用強類型來約束你的代碼了，在需要使用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的插件，就會在保存的時候自動提示這些錯誤出來，如第一張示例圖片那樣。
相關資料：
flow官網：https://flow.org/en/
總結
以上所述是小編給大家介紹的使用flow來規(guī)范javascript的變量類型,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
本篇文章主要介紹了JS數(shù)組交集、并集、差集的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
push() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。這篇文章主要介紹了JavaScript數(shù)組push方法使用注意,需要的朋友可以參考下2017-10-10
在做網站的時候，往往圖片的處理很重要，固定尺寸容易變形拉伸，不固定又會有不可預知的問題，有可能撐開頁面。2009-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片拖拽交換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在使用vue的開發(fā)中,我們會使用axios來做前后端通信,那這時候我們就需要對請求前后做攔截,下面這篇文章主要給大家介紹了關于如何消除axios攔截中if的相關資料,需要的朋友可以參考下2022-04-04
js 無提示關閉瀏覽器頁面的代碼與函數(shù)需要的朋友可以參考下。2010-03-03
javascript+html5實現(xiàn)繪制圓環(huán)的方法
這篇文章主要介紹了javascript+html5實現(xiàn)繪制圓環(huán)的方法,實例分析了javascript實現(xiàn)html5基于canvas繪制圓環(huán)的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JS定時關閉窗口的實例，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了JavaScript基礎教程之alert彈出提示框實例,本文重點在于講解了JavaScript基本語法、基本使用方法,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了用JavaScript實現(xiàn)簡單網頁時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08