vue 引入flow 靜態類型檢測器

1、背景

首先介紹一下什麼是flow , 一個 JAVASCRIPT 靜態類型檢測器 爲何js 要進行類型檢測？ 對於javasscrip 來講，JavaScript 是一種弱類型（或稱動態類型）語言，即變量的類型是不肯定的。

x = 5; // 5
x = x + 'A'; // '5A'
複製代碼

優勢-靈活，代碼簡潔 缺點-不利於發現類型錯誤，存在數據隱患，常常會遭到接觸事後端語言同窗的吐槽

2、目前轉化成強類型的方法

1. TypeScript 是微軟2012年推出的一種編程語言，屬於 JavaScript 的超集，能夠編譯爲 JavaScript 執行 爲何沒有采用TypeScript 的方式，主要有如下幾方面考慮

• 雖然語法與javascript有不少類似的地方，可是總歸是一門新的語言類型，相對來講有必定的學習成本
• 項目比較成熟，javascript 遷移TypeScript 相對工做量以及改動比較大
• 雖然vue2.0 已經支持了TypeScript的方式，可是不能保證咱們應用的全部的組件庫都對此語法支持，爲避免後期又不肯定的麻煩

2. Flow 是 Facebook 在2014年發佈的一個類型檢查工具

• 安裝簡單
• 相對沒有學習成本
• 對已經成熟的項目改動較小
• 支持eslint 檢測
• vue 源碼採用的Flow 類型檢測的方式

3、flow 的引入

1. 安裝包

yarn add flow-bin @babel/preset-flow -D

2. 生成flow 文件

flow init 會生成一個.flowconfig 文件,修改文件配置

[ignore]
 .*/node_modules/.*
 .*/test/.*
 .*/build/.*
 .*/config/.*
 [include]
 
 [libs]
 
 [options]
 module.file_ext=.vue
 module.file_ext=.js
複製代碼

3. 執行flow

在文件頭部寫入/* @flow */ 或者 // @flow 弱模式： /* @flow weak */ ,在弱模式下，Flow 就不作那麼多類型檢測， 對方法內的類型仍是會探測，可是對其餘未註解的變量，會認爲他們能夠是 any 任何類型——也就意味着無須檢測,適合項目初期 而後運行 flow check 或者 yarn run flow 咱們會看到文件報錯信息，代表項目已經安裝flow 成功

可是每次都手動執行命令檢查很麻煩，因此下面咱們配置自動檢查

4. 修改babel

修改.babel/babel.config.js 文件,添加@babel/preset-flow，這樣babel 在編譯的時候會移除 Flow 註解,把添加類型檢測的文件轉化成瀏覽器可支持的語法

presets: [
   '@babel/preset-flow'
   ]

複製代碼

5. 添加eslint 代碼檢測 eslint-plugin-flowtype

yarn add eslint-plugin-flowtype -D 修改.eslintrc.js 文件

extends: [
    'plugin:flowtype/recommended',
  ],
rules: [
  'flowtype/require-parameter-type': 2,
  'flowtype/generic-spacing': 2
},
....
  plugins: ['flowtype'],
  settings: {
    flowtype: {
      onlyFilesWithFlowAnnotation: true //只在添加@flow註釋的文件才作檢查
    }
  }
複製代碼

4、flow 使用方式簡介

1. 類型註釋 / 類型註解

在大多數狀況下，Flow 都可以探測出具體類型，因此你不須要給每一個方法、變量都添加類型註解。 雖然說 Flow 能探測出類型，可是你依然能夠嚴格聲明類型。 只有下面這類狀況才 必須 明確地聲明類型：變量/方法/類 是從別的模塊中導入的（在別的文件定義）

// @flow

(function() { 
function foo(x: string, y: number): string {
  return x.length * y;
}

foo('Hello', 42);
}); 
複製代碼

這表示 foo 方法返回值的類型爲 string，而且兩個參數類型分別爲 string 和 number

2. 原生數據類型

boolean、number、string、null、void 此處須要注意 上面的類型屬性 與 Number, String, Boolean是有本質的區別的，咱們經過代碼來看一下 代碼類型爲小寫，表示常規類型

// @flow
function method(x: number, y: string, z: boolean) {
  // ...
}

method(3.14, "hello", true);
複製代碼

代碼類型爲大寫，表示對象類型

// @flow
function method(x: Number, y: String, z: Boolean) {
  // ...
}

method(new Number(42), new String("world"), new Boolean(false));
複製代碼

3. 未肯定類型（Maybe types）

咱們可使用type 用 ?type, 表示此類型可能爲type 類型，也有多是 null or void.

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();   
複製代碼

若是是對象類型的，咱們可使用 { propertyName?: string }

4. 泛型

泛型對象可使用別名類型來定義

type GenericObject<T> = { foo: T };
var numberObject: GenericObject<number> = { foo: 0 };
var stringObject: GenericObject<string> = { foo: "foo" };
複製代碼

這裏只介紹常規的使用方法以及 API ,詳細內容還須要你們看文檔

5、報錯處理

1. types' can only be used in a .ts file

若是使用的vscode 咱們在只從過程當中可能會遇到 此問題， 解決辦法： 關閉vs code 的檢測
"javascript.validate.enable": false

6、參考文章

• 強類型 JavaScript 的解決方案
• 官方文檔