你是否經(jīng)常在debug那些簡(jiǎn)單可避免的bug？可能你給函數(shù)傳參的時(shí)候搞錯(cuò)了參數(shù)的順序，或者本來(lái)應(yīng)該傳個(gè)Number類(lèi)型的參數(shù)，你傳了一個(gè)String類(lèi)型？JavaScript的弱類(lèi)型是這一類(lèi)bug的罪魁禍?zhǔn)?，靜態(tài)類(lèi)型語(yǔ)言中不存在此類(lèi)bug。Flow就是JavaScript的靜態(tài)類(lèi)型檢查工具，該庫(kù)的目標(biāo)在于檢查JavaScript中的類(lèi)型錯(cuò)誤，開(kāi)發(fā)者通常不需要修改代碼即可使用，故使用成本很低。同時(shí)，它也提供額外語(yǔ)法支持，使得開(kāi)發(fā)者能更大程度地發(fā)揮Flow的作用。

一、flow的安裝

flow可以直接通過(guò)npm或者yarn安裝。

這里以npm為例：npm install --save-dev flow-bin

安裝完成后在package.json中加入下面的腳本

"scripts": {
  "flow":"flow check"
 }

同時(shí)還要安裝babel編譯器，將flow的類(lèi)型檢查代碼從代碼中剝離，轉(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 等目錄下的文件，所以我們需要在將這些目錄寫(xiě)在 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)行檢查，需要把它們寫(xiě)在 include 配置項(xiàng)中。

[libs]：在項(xiàng)目中，我們可能會(huì)用到很多自定義的類(lèi)型，比如說(shuō)要記錄對(duì)象的結(jié)構(gòu)，它可能在每個(gè)文件中都會(huì)被運(yùn)用到，我們將其抽取為全局的類(lèi)型或數(shù)據(jù)結(jié)構(gòu)，在任何文件都可以使用。為了管理方便，我們將全局類(lèi)型都定義在一個(gè)或多個(gè)單純的目錄中統(tǒng)一管理。這里存放的有可能是一個(gè)定義好的數(shù)據(jù)結(jié)構(gòu)，存放的也有可能是根據(jù)項(xiàng)目中某個(gè)類(lèi)對(duì)應(yīng)的數(shù)據(jù)類(lèi)型。我們將這些文件或目錄寫(xiě)在 libs 配置項(xiàng)中，這個(gè)配置對(duì)于我們使用 Flow 來(lái)說(shuō)很重要。

[options]：這里填寫(xiě)對(duì) Flow 項(xiàng)目的一些配置，配置項(xiàng)以key=value的形式，每行寫(xiě)一個(gè)。所有的配置見(jiàn)官方文檔

[lints]：官網(wǎng)中沒(méi)有提到 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í)行類(lèi)型檢查。

注：完成設(shè)置之后，在終端輸入以下命令可以在你的項(xiàng)目根目錄以及任何子目錄文件夾下進(jìn)行專(zhuān)門(mén)的類(lèi)型檢查：npm run flow check，但是，這并不是最高效的使用方式，因?yàn)槊看蜦low都會(huì)重新檢查整個(gè)項(xiàng)目的所有文件。開(kāi)發(fā)過(guò)程中，推薦啟動(dòng)Flow服務(wù)：Flow服務(wù)的工作方式是增量檢查，也就是說(shuō)它只檢查變化的部分。在終端輸入以下命令來(lái)啟動(dòng)Flow服務(wù)：npm run flow，首次運(yùn)行該命令時(shí)，服務(wù)啟動(dòng)并且顯示最初類(lèi)型檢查結(jié)果。這保證了Flow更高效的增量式工作流。然后接下來(lái)每次想要知道檢測(cè)結(jié)果，只要輸入flow命令即可。開(kāi)發(fā)結(jié)束之后，輸入npm run flow stop停止服務(wù)。

Flow的類(lèi)型檢查是可選的，并不需要一次性檢查所有代碼。你可以選擇你想要檢查的文件，只要在對(duì)應(yīng)的JavaScript文件最前面加上帶有@flow標(biāo)識(shí)的注釋即可：/*@flow*/，當(dāng)你想在已有項(xiàng)目中加入Flow的時(shí)候，該特性特別有幫助。因?yàn)槟憧梢砸灰贿x擇并檢測(cè)你要的文件，然后修正錯(cuò)誤。

三、類(lèi)型推斷

　　通常，類(lèi)型檢查分為以下兩種方式：

　　通過(guò)注釋?zhuān)菏孪茸⑨尯梦覀兤诖念?lèi)型，F(xiàn)low就會(huì)基于這些注釋來(lái)評(píng)估

　　通過(guò)代碼推斷：通過(guò)變量的使用上下文來(lái)推斷出變量類(lèi)型，然后根據(jù)這些推斷來(lái)檢查類(lèi)型

　　第一種方式，我們需要額外編寫(xiě)只在開(kāi)發(fā)階段起作用的代碼，最后在代碼編譯打包的階段被剔除。顯然，這種額外添加類(lèi)型注釋的方式增加了工作量。

　　第二種方式，不需要任何代碼修改即可進(jìn)行類(lèi)型檢查，最小化開(kāi)發(fā)者的工作量。它不會(huì)強(qiáng)制你改變開(kāi)發(fā)習(xí)慣，因?yàn)樗鼤?huì)自動(dòng)推斷出變量的類(lèi)型。這就是所謂的類(lèi)型推斷，F(xiàn)low最重要的特性之一。

　　我們來(lái)通過(guò)一個(gè)例子來(lái)說(shuō)明這個(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ò)誤信息類(lèi)似如下:

index.js:4
  4:   return x.split(' ');
                ^^^^^ property `split`. Property not found in
  4:   return x.split(' ');
              ^ Number

上述信息清楚地指出了出錯(cuò)位置和錯(cuò)誤原因。我們只要將參數(shù)變成字符串，即可修正錯(cuò)誤。該例想說(shuō)明的是，因?yàn)閟plit()方法只適用于string類(lèi)型的變量，所以x應(yīng)該是string，這就是類(lèi)型推斷。

四、空類(lèi)型

Flow處理null的方式與其他類(lèi)型庫(kù)不同。它不會(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)行。上述代碼可以通過(guò)Flow的類(lèi)型檢查。

五、類(lèi)型注釋

如上所述，類(lèi)型推斷是Flow最有用的特性之一，不需要編寫(xiě)類(lèi)型注釋就能獲取有用的反饋。但在某些特定的場(chǎng)景下，添加類(lèi)型注釋可以提供更好更明確的檢查依據(jù)?？紤]以下代碼：

/*@flow*/
function foo(x, y){
 return x + y;
}
foo('Hello', 42);

Flow檢查上述代碼時(shí)檢查不出任何錯(cuò)誤，因?yàn)?即可以用在字符串上，也可以用在數(shù)字上，我們并沒(méi)有明確指出add()的參數(shù)必須為數(shù)字。

在這種情況下，我們可以借助類(lèi)型注釋來(lái)指明期望的類(lèi)型。類(lèi)型注釋是以冒號(hào):開(kāi)頭，可以在函數(shù)參數(shù)，返回值，變量聲明中使用。如果我們?cè)谏隙未a中添加類(lèi)型注釋?zhuān)蜁?huì)變成如下：

/*@flow*/
function foo(x : number, y : number) : number {
 return x + y;
}
foo('Hello', 42);

現(xiàn)在Flow就能檢查出錯(cuò)誤，因?yàn)楹瘮?shù)參數(shù)的期待類(lèi)型為數(shù)字，而我們提供了字符串。Flow報(bào)錯(cuò)信息類(lèi)似如下：

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ò)誤。類(lèi)型注釋在大型復(fù)雜的JavaScript文件中也很有用，它能保證代碼按照預(yù)期進(jìn)行。

六、Flow能支持的其他更多類(lèi)型注釋。

其實(shí)說(shuō)到底就是類(lèi)似java那種強(qiáng)語(yǔ)言類(lèi)型的寫(xiě)法，給每個(gè)變量聲明是什么類(lèi)型，給每個(gè)函數(shù)聲明返回值類(lèi)型，給每個(gè)數(shù)組元素聲明類(lèi)型等，就是仿造java的寫(xiě)法，哈哈，java傳值不對(duì)時(shí)就會(huì)給你報(bào)錯(cuò)一樣的道理

1、函數(shù)

/*@flow*/
function add(x : number, y : number) : number {
 return x + y;
}
add(3, 4);

上述代碼展示了變量類(lèi)型注釋以及函數(shù)類(lèi)型注釋。函數(shù)add()的參數(shù)，以及函數(shù)的返回值，期待類(lèi)型為數(shù)字。如果傳入其他類(lèi)型參數(shù)，F(xiàn)low就會(huì)檢測(cè)到錯(cuò)誤。

2、數(shù)組

var foo : Array<number> = [1,2,3];

數(shù)組類(lèi)型注釋的格式是Array<T>，T表示數(shù)組中每項(xiàng)的數(shù)據(jù)類(lèi)型。在上述代碼中，foo是每項(xiàng)均為數(shù)字的數(shù)組。

3、類(lèi)

下面展示了類(lèi)和對(duì)象的類(lèi)型注釋模型。唯一需要注意的是，可以在兩個(gè)類(lèi)型之間使用或邏輯，用|來(lái)間隔。變量bar1添加了必須為Bar類(lèi)的類(lèi)型注釋。

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ì)象的類(lèi)型注釋類(lèi)似于類(lèi)，指定對(duì)象屬性的類(lèi)型。

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

若想任意類(lèi)型，T可以為null或者undefined，只需類(lèi)似如下寫(xiě)成 ?T 的格式即可。

/*@flow*/
var foo : ?string = null;

此時(shí)，foo可以為字符串，也可以為null。

目前我們只對(duì)Flow的類(lèi)型注釋做了很淺的探索。一旦你習(xí)慣了使用這些基本類(lèi)型，建議在Flow官網(wǎng)上的類(lèi)型文檔深入了解所有的類(lèi)型。

七、庫(kù)定義

我們經(jīng)常需要引入第三方庫(kù)，F(xiàn)low檢查時(shí)就會(huì)拋出錯(cuò)誤。但這并不是我們期待的錯(cuò)誤。

慶幸的是，我們不需要修改庫(kù)源碼去防止這些報(bào)錯(cuò)。我們只需創(chuàng)建一個(gè)庫(kù)定義（libdef）。libdef是包含第三方庫(kù)聲明的JS文件簡(jiǎn)稱(chēng)。觀(guā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è)問(wèn)題，我們需要引入U(xiǎn)nderscore的庫(kù)定義

1、使用flow-typed

　　flow-typed倉(cāng)庫(kù)包含了眾多流行的第三方庫(kù)的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來(lái)檢查package.json文件，并且下載所有項(xiàng)目中用到的第三方庫(kù)的libdef。

2、自定義libdef

　　如果你用的庫(kù)并不在flow-typed倉(cāng)庫(kù)，你可以創(chuàng)建你自己的libdef。本文不會(huì)細(xì)談自定義libdef，因?yàn)楹苌贂?huì)有人遇到，感興趣可以查看此文檔。

八、剔除類(lèi)型注釋

　　由于額外添加的類(lèi)型注釋不是正確的JavaScript語(yǔ)法，打包編譯的時(shí)候需要在源碼中剔除?？梢酝ㄟ^(guò)flow-remove-types來(lái)剔除，或者如果你已經(jīng)用Babel來(lái)轉(zhuǎn)譯JS，你可以使用Babel preset來(lái)移除。我們只討論第一種方法。

　　首先需要安裝flow-remove-types作為項(xiàng)目依賴(lài)庫(kù)：npm install --save-dev flow-remove-types

　　然后在package.json文件中添加另一個(gè)script入口：

"scripts": {
 "flow": "flow",
 "build": "flow-remove-types src/ -D dest/",
}

上述命令將剔除src文件夾下的所有類(lèi)型注釋?zhuān)赿ist文件夾中保存編譯后的版本。編譯后的文件就是普通的能運(yùn)行于瀏覽器的JavaScript文件。

到此這篇關(guān)于vue項(xiàng)目配置使用flow類(lèi)型檢查的步驟的文章就介紹到這了,更多相關(guān)vue flow類(lèi)型檢查內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論