vue2.0專案配置flow型別檢查

ltinyho發表於2017-04-23
Vue型別

在vue2.0的專案中加入flow型別檢查。當前專案是用js寫的，當專案越來越大，由於js弱型別的特性，相比ts(typescript)這種強型別的語言而言，後期維護會越來越困難。為了解決這個問題，決定使用flow 加入型別檢查。

一、flow瞭解

flow是fackbook公佈的javascript靜態型別檢查器。 可以檢查js中一些bug，eg：自動型別轉換中出現的問題。flow官網

引用flow官網的介紹

flow is a static type checker for javascript

flow初體驗

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

使用bebel轉換後

let a = 2;
function foo(b){
    return false;
}

從上面程式碼可以看出，使用flow後的程式碼更清晰明瞭。雖然使用註釋也可以實現，但使用註釋太繁瑣，而且不直觀。

二、flow的安裝

flow可以直接通過npm或者yarn安裝。官網推薦安裝方式

這裡以npm為例

npm install –save-dev flow-bin

安裝完成後在package.json中加入下面的指令碼

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

同時還要安裝babel編譯器，將flow的型別檢查程式碼從程式碼中剝離，轉變成正常的js程式碼

npm install –save-dev babel-cli babel-preset-flow

在babel配置檔案.babelrc中加入

{
  "presets": ["flow"]
}

三、flow使用

配置flow

我的配置檔案

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

  • 2、新建一個檔案index.js

// @flow 
let a:number = `3`;

// @flow或者 /* @flow */告訴flow檢查這個檔案
輸入npm run flow 執行型別檢查

注：在vue單檔案元件使用flow需要額外配置

  • 1、在.flowconfig檔案的[options]中配置.vue副檔名

module.file_ext=.vue 
/* @flow
<template>
  <div>
  </div>
</template>
*/
// <script>
  let a:string = 2;
  console.log(a);
  export  default {
    data(){
      return {
       
      }
    }
  }
// </script>
/*
<style scoped>
</style>
*/

注意：
1、 在註釋template和style時使用/**/註釋，在template和style內部不能再使用 /* */這種註釋，這個不是flow不識別，本來就不應改/**/中巢狀/**/,應該在/**/中採用 // 註釋風格
2、如果不想在.vue中使用註釋的方法，可以在ide中安裝flow，但是不能使用npm run flow來檢查了。

webstorm中配置flow

配置webstorm，使其支援flow語法。官網ide配置

總結一下為3點：

  • 1、安裝node包

  • 2、全域性安裝flow

  • 3、在框架設定中選擇JavaScript flow

以上是我在vue2.0專案安裝flow的全部過程。

參考文章：

相關文章