vue項(xiàng)目配置使用flow類型檢查的步驟
你是否經(jīng)常在debug那些簡(jiǎn)單可避免的bug?可能你給函數(shù)傳參的時(shí)候搞錯(cuò)了參數(shù)的順序,或者本來應(yīng)該傳個(gè)Number類型的參數(shù),你傳了一個(gè)String類型?JavaScript的弱類型是這一類bug的罪魁禍?zhǔn)?,靜態(tài)類型語言中不存在此類bug。Flow就是JavaScript的靜態(tài)類型檢查工具,該庫的目標(biāo)在于檢查JavaScript中的類型錯(cuò)誤,開發(fā)者通常不需要修改代碼即可使用,故使用成本很低。同時(shí),它也提供額外語法支持,使得開發(fā)者能更大程度地發(fā)揮Flow的作用。
一、flow的安裝
flow可以直接通過npm或者yarn安裝。
這里以npm為例:npm install --save-dev flow-bin
安裝完成后在package.json中加入下面的腳本
"scripts": { "flow":"flow check" }
同時(shí)還要安裝babel編譯器,將flow的類型檢查代碼從代碼中剝離,轉(zhuǎn)變成正常的js代碼
npm install --save-dev babel-cli babel-preset-flow
在babel配置文件.babelrc中加入
{ "presets": ["flow"] }
二、flow使用
1、配置flow
npm run flow init生成flow配置文件.flowconfig
[ignore] .*/node_modules/.* .*/test/.* .*/build/.* .*/config/.* [include] [libs] [options] module.file_ext=.vue module.file_ext=.js
[ignore]:Flow 默認(rèn)檢查項(xiàng)目目錄下所有文件,但是有很多文件必定是我們不想檢查的,就像 node_modules、build 等目錄下的文件,所以我們需要在將這些目錄寫在 ignore 配置下。
[include]:所謂的項(xiàng)目目錄其實(shí)是 .flowconfig 目錄,并不是真正的項(xiàng)目目錄,如果我們?cè)谶@個(gè)項(xiàng)目中的某個(gè)目錄下創(chuàng)建一個(gè) .flowconfig,那么 .flowconfig 所在的目錄也會(huì)變?yōu)橐粋€(gè) Flow 項(xiàng)目。那么,如果我們想對(duì)當(dāng)前 Flow 項(xiàng)目以外的文件或者目錄進(jìn)行檢查,需要把它們寫在 include 配置項(xiàng)中。
[libs]:在項(xiàng)目中,我們可能會(huì)用到很多自定義的類型,比如說要記錄對(duì)象的結(jié)構(gòu),它可能在每個(gè)文件中都會(huì)被運(yùn)用到,我們將其抽取為全局的類型或數(shù)據(jù)結(jié)構(gòu),在任何文件都可以使用。為了管理方便,我們將全局類型都定義在一個(gè)或多個(gè)單純的目錄中統(tǒng)一管理。這里存放的有可能是一個(gè)定義好的數(shù)據(jù)結(jié)構(gòu),存放的也有可能是根據(jù)項(xiàng)目中某個(gè)類對(duì)應(yīng)的數(shù)據(jù)類型。我們將這些文件或目錄寫在 libs 配置項(xiàng)中,這個(gè)配置對(duì)于我們使用 Flow 來說很重要。
[options]:這里填寫對(duì) Flow 項(xiàng)目的一些配置,配置項(xiàng)以key=value的形式,每行寫一個(gè)。所有的配置見官方文檔
[lints]:官網(wǎng)中沒有提到 lints 相關(guān)的配置
2、新建一個(gè)文件index.js
// @flow let a:number = '3'; // @flow或者 /* @flow */,告訴flow檢查這個(gè)文件
如果不愿意那么麻煩,想檢查全部文件,那么可以修改配置文件.flowconfig,在[options]配置項(xiàng)中添加 all=ture。
[ignore] [include] [libs] [options] all=true [lints]
[libs] 配置項(xiàng)中的文件不需要添加// @flow,它們都將被檢查。
注:在vue單文件組件使用flow需要額外配置:
(1)在.flowconfig文件的[options]中配置.vue文件擴(kuò)展名,module.file_ext=.vue
(2)在.vue文件中需注釋掉template script styled標(biāo)簽
輸入npm run flow
執(zhí)行類型檢查。
注:完成設(shè)置之后,在終端輸入以下命令可以在你的項(xiàng)目根目錄以及任何子目錄文件夾下進(jìn)行專門的類型檢查:npm run flow check,但是,這并不是最高效的使用方式,因?yàn)槊看蜦low都會(huì)重新檢查整個(gè)項(xiàng)目的所有文件。開發(fā)過程中,推薦啟動(dòng)Flow服務(wù):Flow服務(wù)的工作方式是增量檢查,也就是說它只檢查變化的部分。在終端輸入以下命令來啟動(dòng)Flow服務(wù):npm run flow,首次運(yùn)行該命令時(shí),服務(wù)啟動(dòng)并且顯示最初類型檢查結(jié)果。這保證了Flow更高效的增量式工作流。然后接下來每次想要知道檢測(cè)結(jié)果,只要輸入flow命令即可。開發(fā)結(jié)束之后,輸入npm run flow stop停止服務(wù)。
Flow的類型檢查是可選的,并不需要一次性檢查所有代碼。你可以選擇你想要檢查的文件,只要在對(duì)應(yīng)的JavaScript文件最前面加上帶有@flow標(biāo)識(shí)的注釋即可:/*@flow*/,當(dāng)你想在已有項(xiàng)目中加入Flow的時(shí)候,該特性特別有幫助。因?yàn)槟憧梢砸灰贿x擇并檢測(cè)你要的文件,然后修正錯(cuò)誤。
三、類型推斷
通常,類型檢查分為以下兩種方式:
通過注釋:事先注釋好我們期待的類型,F(xiàn)low就會(huì)基于這些注釋來評(píng)估
通過代碼推斷:通過變量的使用上下文來推斷出變量類型,然后根據(jù)這些推斷來檢查類型
第一種方式,我們需要額外編寫只在開發(fā)階段起作用的代碼,最后在代碼編譯打包的階段被剔除。顯然,這種額外添加類型注釋的方式增加了工作量。
第二種方式,不需要任何代碼修改即可進(jìn)行類型檢查,最小化開發(fā)者的工作量。它不會(huì)強(qiáng)制你改變開發(fā)習(xí)慣,因?yàn)樗鼤?huì)自動(dòng)推斷出變量的類型。這就是所謂的類型推斷,F(xiàn)low最重要的特性之一。
我們來通過一個(gè)例子來說明這個(gè)特性:
/*@flow*/ function foo(x) { return x.split(' '); } foo(34);
當(dāng)你在終端運(yùn)行npm run flow命令的時(shí)候,上述代碼會(huì)報(bào)錯(cuò),因?yàn)楹瘮?shù)foo()的期待參數(shù)是字符串,而我們輸入了數(shù)字。錯(cuò)誤信息類似如下:
index.js:4
4: return x.split(' ');
^^^^^ property `split`. Property not found in
4: return x.split(' ');
^ Number
上述信息清楚地指出了出錯(cuò)位置和錯(cuò)誤原因。我們只要將參數(shù)變成字符串,即可修正錯(cuò)誤。該例想說明的是,因?yàn)閟plit()方法只適用于string類型的變量,所以x應(yīng)該是string,這就是類型推斷。
四、空類型
Flow處理null的方式與其他類型庫不同。它不會(huì)忽略null,這樣可以防止了因給變量傳了null而導(dǎo)致程序崩潰的錯(cuò)誤。
/*@flow*/ function stringLength (str) { return str.length; } var length = stringLength(null); Flow會(huì)報(bào)錯(cuò)。為了防止出錯(cuò),我們需要單獨(dú)處理null。 /*@flow*/ function stringLength (str) { if (str !== null) { return str.length; } return 0; } var length = stringLength(null);
代碼中我們引入對(duì)null的檢查,確保代碼能在任何情況下都正常且正確運(yùn)行。上述代碼可以通過Flow的類型檢查。
五、類型注釋
如上所述,類型推斷是Flow最有用的特性之一,不需要編寫類型注釋就能獲取有用的反饋。但在某些特定的場(chǎng)景下,添加類型注釋可以提供更好更明確的檢查依據(jù)??紤]以下代碼:
/*@flow*/ function foo(x, y){ return x + y; } foo('Hello', 42);
Flow檢查上述代碼時(shí)檢查不出任何錯(cuò)誤,因?yàn)?即可以用在字符串上,也可以用在數(shù)字上,我們并沒有明確指出add()的參數(shù)必須為數(shù)字。
在這種情況下,我們可以借助類型注釋來指明期望的類型。類型注釋是以冒號(hào):開頭,可以在函數(shù)參數(shù),返回值,變量聲明中使用。如果我們?cè)谏隙未a中添加類型注釋,就會(huì)變成如下:
/*@flow*/ function foo(x : number, y : number) : number { return x + y; } foo('Hello', 42);
現(xiàn)在Flow就能檢查出錯(cuò)誤,因?yàn)楹瘮?shù)參數(shù)的期待類型為數(shù)字,而我們提供了字符串。Flow報(bào)錯(cuò)信息類似如下:
index.js:7
7: foo('Hello', 42);
^^^^^^^ string. This type is incompatible with the expected param type of
3: function foo(x : number, y : number) : number{
^^^^^^ number
如果傳入的參數(shù)是數(shù)字,就不會(huì)有錯(cuò)誤。類型注釋在大型復(fù)雜的JavaScript文件中也很有用,它能保證代碼按照預(yù)期進(jìn)行。
六、Flow能支持的其他更多類型注釋。
其實(shí)說到底就是類似java那種強(qiáng)語言類型的寫法,給每個(gè)變量聲明是什么類型,給每個(gè)函數(shù)聲明返回值類型,給每個(gè)數(shù)組元素聲明類型等,就是仿造java的寫法,哈哈,java傳值不對(duì)時(shí)就會(huì)給你報(bào)錯(cuò)一樣的道理
1、函數(shù)
/*@flow*/ function add(x : number, y : number) : number { return x + y; } add(3, 4);
上述代碼展示了變量類型注釋以及函數(shù)類型注釋。函數(shù)add()的參數(shù),以及函數(shù)的返回值,期待類型為數(shù)字。如果傳入其他類型參數(shù),F(xiàn)low就會(huì)檢測(cè)到錯(cuò)誤。
2、數(shù)組
var foo : Array<number> = [1,2,3];
數(shù)組類型注釋的格式是Array<T>,T表示數(shù)組中每項(xiàng)的數(shù)據(jù)類型。在上述代碼中,foo是每項(xiàng)均為數(shù)字的數(shù)組。
3、類
下面展示了類和對(duì)象的類型注釋模型。唯一需要注意的是,可以在兩個(gè)類型之間使用或邏輯,用|來間隔。變量bar1添加了必須為Bar類的類型注釋。
class Bar{ x:string; // x should be string y:string | number; // y can be either a string or a number constructor(x,y){ this.x=x; this.y=y; } } var bar1 : Bar = new Bar("hello",4);
4、對(duì)象字面量
對(duì)象的類型注釋類似于類,指定對(duì)象屬性的類型。
var obj : {a : string, b : number, c: Array<string>, d : Bar} = { a : "hello", b : 42, c : ["hello", "world"], d : new Bar("hello",3) }
5、Null
若想任意類型,T可以為null或者undefined,只需類似如下寫成 ?T 的格式即可。
/*@flow*/ var foo : ?string = null;
此時(shí),foo可以為字符串,也可以為null。
目前我們只對(duì)Flow的類型注釋做了很淺的探索。一旦你習(xí)慣了使用這些基本類型,建議在Flow官網(wǎng)上的類型文檔深入了解所有的類型。
七、庫定義
我們經(jīng)常需要引入第三方庫,F(xiàn)low檢查時(shí)就會(huì)拋出錯(cuò)誤。但這并不是我們期待的錯(cuò)誤。
慶幸的是,我們不需要修改庫源碼去防止這些報(bào)錯(cuò)。我們只需創(chuàng)建一個(gè)庫定義(libdef)。libdef是包含第三方庫聲明的JS文件簡(jiǎn)稱。觀察下面的例子:
/* @flow */ var users = [ { name: 'John', designation: 'developer' }, { name: 'Doe', designation: 'designer' } ]; function getDeveloper() { return _.findWhere(users, {designation: 'developer'}); }
Flow會(huì)檢查出以下錯(cuò)誤:
interfaces/app.js:9
9: return _.findWhere(users, {designation: 'developer'});
^ identifier `_`. Could not resolve name
由于Flow并不認(rèn)識(shí)_,所以會(huì)報(bào)錯(cuò)。要解決這個(gè)問題,我們需要引入U(xiǎn)nderscore的庫定義
1、使用flow-typed
flow-typed倉庫包含了眾多流行的第三方庫的libdef。只需在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為flow-typed的文件夾,并且下載相關(guān)的定義文件即可。為了進(jìn)一步簡(jiǎn)化,可以用npm的命令行方式一鍵獲取和安裝libdef文件:npm install -g flow-typed
安裝成功之后, 運(yùn)行flow-typed install來檢查package.json文件,并且下載所有項(xiàng)目中用到的第三方庫的libdef。
2、自定義libdef
如果你用的庫并不在flow-typed倉庫,你可以創(chuàng)建你自己的libdef。本文不會(huì)細(xì)談自定義libdef,因?yàn)楹苌贂?huì)有人遇到,感興趣可以查看此文檔。
八、剔除類型注釋
由于額外添加的類型注釋不是正確的JavaScript語法,打包編譯的時(shí)候需要在源碼中剔除??梢酝ㄟ^flow-remove-types來剔除,或者如果你已經(jīng)用Babel來轉(zhuǎn)譯JS,你可以使用Babel preset來移除。我們只討論第一種方法。
首先需要安裝flow-remove-types作為項(xiàng)目依賴庫:npm install --save-dev flow-remove-types
然后在package.json文件中添加另一個(gè)script入口:
"scripts": { "flow": "flow", "build": "flow-remove-types src/ -D dest/", }
上述命令將剔除src文件夾下的所有類型注釋,在dist文件夾中保存編譯后的版本。編譯后的文件就是普通的能運(yùn)行于瀏覽器的JavaScript文件。
到此這篇關(guān)于vue項(xiàng)目配置使用flow類型檢查的步驟的文章就介紹到這了,更多相關(guān)vue flow類型檢查內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場(chǎng)景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02vue 解決data中定義圖片相對(duì)路徑頁面不顯示的問題
這篇文章主要介紹了vue 解決data中定義圖片相對(duì)路徑頁面不顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue?webpack打包原理解析(全網(wǎng)最新最全)
webpack是讓我們可以進(jìn)行模塊化開發(fā),并且會(huì)幫助我們處理模塊間的依賴關(guān)系,這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點(diǎn)長(zhǎng),希望大家耐心閱讀2023-02-02vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08react+?ts?vite搭建及二次封裝請(qǐng)求的過程解析
這篇文章主要介紹了react+?ts?vite搭建及二次封裝請(qǐng)求,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04electron-vite新一代electron開發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開發(fā)構(gòu)建工具,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法
這篇文章主要介紹了vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡(jiǎn)易的動(dòng)態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-05-05vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的解決
這篇文章主要介紹了vue el-select綁定對(duì)象時(shí),回顯內(nèi)容不正確,始終是最后一項(xiàng)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07