Vue項目中使用flow做類型檢測的方法

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

flow了解

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

首先，安裝flow

npm i flow-bin --save-dev

然后在package.json中添加腳本

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

在項目根目錄下運行命令，生成文件.flowconfig

npm run flow init

打開 .flowconfig 文件，可以看到內容大致如下

.*/node_modules/.*
.*/test/.*
.*/build/.*
[include]
[libs]
[lints]
[options]
module.file_ext=.vue 
module.file_ext=.js
[strict]

其中在[ignore]下配置要忽略的文件，在[options]中我們可以添加
module.file_ext=.vue 這樣的配置讓flow檢測vue單文件組件

• [ignore]：Flow 默認檢查項目目錄下所有文件，但是有很多文件必定是我們不想檢查的，就像 node_modules、build 等目錄下的文件，所以我們需要在將這些目錄寫在 ignore 配置下。
• [include]：所謂的項目目錄其實是 .flowconfig 目錄，并不是真正的項目目錄，如果我們在這個項目中的某個目錄下創建一個 .flowconfig，那么 .flowconfig 所在的目錄也會變為一個 Flow 項目。那么，如果我們想對當前 Flow 項目以外的文件或者目錄進行檢查，需要把它們寫在 include 配置項中。
• [libs]：在項目中，我們可能會用到很多自定義的類型，比如說要記錄對象的結構，它可能在每個文件中都會被運用到，我們將其抽取為全局的類型或數據結構，在任何文件都可以使用。為了管理方便，我們將全局類型都定義在一個或多個單純的目錄中統一管理。這里存放的有可能是一個定義好的數據結構，存放的也有可能是根據項目中某個類對應的數據類型。我們將這些文件或目錄寫在 libs 配置項中，這個配置對于我們使用 Flow 來說很重要。
• [options]：這里填寫對 Flow 項目的一些配置，配置項以key=value的形式，每行寫一個。所有的配置見官方文檔
• [lints]：官網中沒有提到 lints 相關的配置

然后，在需要flow進行類型檢測的.js文件或.vue文件script標簽內容最頂部，加上注釋

// @flow

沒有該注釋對文件將不會進行類型檢測

配置到到這里，我們可以運行 npm run flow 進行代碼到類型檢查，獲取檢查報告。

由于類型注釋不是我們ES規范的一部分，因此我們需要把使用了flow的代碼轉換成正常的js代碼，可以使用babel-preset-flow或babel-plugin-transform-flow-strip-types來移除它。

安裝flow相關的flow插件：
babel-cli: babel-cli腳手架
babel-preset-flow: 用于編譯前去除代碼中的類型聲明
babel-plugin-transform-flow-strip-types 同上，而選一

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

安裝完后，在項目根目錄的.babelrc文件(無則創建)里添加如下內容

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2",
  "flow"
 ],
 "plugins": [
  //"babel-plugin-transform-flow-strip-types"
 ]
}

如果想要在代碼中實時看到flow類型檢查的錯誤，需要安裝eslint插件

npm i eslint-plugin-flowtype-errors --save-dev

然后在.eslintrc文件中添加配置：

 {
 plugins: [
  'flowtype-errors'
 ],
 rules: {
  "flowtype-errors/show-errors": 2
 }
}

PS:在vscode中進行類型聲明時可能會報"類型聲明只能在.ts文件中使用"的錯誤，這時候找到setting,搜索javascript.validate,將其禁用即可

參考文章：Writing Vue.js Components with Flow

到此這篇關于Vue項目中使用flow做類型檢測的方法的文章就介紹到這了,更多相關Vue flow 類型檢測內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！