前端進階（5） - js 擴展：靜態(tài)類型檢查（facebook flow）

js 擴展：靜態(tài)類型檢查（facebook flow）

js 語言與 java淆九、C 系列等語言有一點很大的不同，就是 js 語言是弱類型語言涮帘。js 語言的這個特性可能讓大家覺得 js 很自由豫缨，沒有強制性的約束，但是當遇到大型項目的時候赶促，js 的這個特性就會變得比較麻煩，因為這會導致團隊的代碼很不可控挟炬。這個原因也是促使 TypeScript 誕生的一個很重要的原因鸥滨。

但其實很多開發(fā)人員還是比較喜歡用 js 來開發(fā)項目，所以 facebook 開發(fā)出 flow 來幫助 js 語言擴展靜態(tài)類型檢查功能谤祖，規(guī)避上面提到的問題婿滓。

1. 代碼示例

flow 規(guī)定，在需要做 'flow 靜態(tài)類型檢查' 文件的開頭加上 // @flow 這段注釋粥喜，讓工具識別這個文件需要做靜態(tài)類型檢查凸主，否則就會當作一般 js 文件對待，不做靜態(tài)類型檢查额湘。

flow 靜態(tài)類型幾乎可以應用到所有的 js 對象卿吐，包括 es6 擴展的 class, module 等，也包括 jsx 語法锋华。

以下是一些基礎的靜態(tài)類型舉例嗡官，更詳細的可以查看 Type Annotations | Flow.

1.1 基本類型

與 js 的基本數(shù)據(jù)類型類似，包括:

boolean: 對應 js 的 Boolean 類型
number: 對應 js 的 Number 類型
string: 對應 js 的 String 類型
null: 對應 js 的 null
void: 對應 js 的 undefined

正常的 js 代碼

let hello = 'hello'; // 聲明一個變量

hello = 2 * 2; // 重新賦值

hello = []; // 重新賦值

加上 flow 靜態(tài)類型檢查擴展的代碼

// @flow

let hello: string = 'hello'; // 聲明一個 string 類型的變量

hello = 2 * 2; // 報錯

hello = []; // 報錯

hello = 'hi'; // 重新賦值

1.2 函數(shù)

正常的 js 代碼

function plus(a, b) {
  return a + b;
}

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus('hello'); // 'helloundefined'
plus('hello', ' hi'); // 'hello hi'
plus({}, {}); // '[object Object][object Object]'

加上 flow 靜態(tài)類型檢查擴展的代碼

// @flow

// 定義一個 '兩個數(shù)字參數(shù)供置，返回值也是數(shù)字' 的函數(shù)
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 報錯
plus(1); // 報錯
plus('hello'); // 報錯
plus('hello', ' hi'); // 報錯
plus({}, {}); // 報錯

plus(1, 2); // 3

1.3 可能（Maybe）谨湘，可選（Optional）绽快，語義（Literal）芥丧，混合（Mixed）

可能（Maybe）類型用一個 ? 在類型前面表示，包含類型本身坊罢、null续担、undefined

// @flow

let hello: ?string; // 聲明一個數(shù)據(jù)類型可以是 string, null, undefined 的變量

hello = null; // 賦值
hello = undefined; // 重新賦值
hello = 'hello'; // 重新賦值
hello = 1; // 報錯
hello = true; // 報錯

可選（Optional）類型一般用于對象屬性或者函數(shù)參數(shù)，在名稱后面加一個 ?活孩，包含類型本身物遇、undefined

// @flow

const obj: {hello? : string}; // 屬性 hello 可以是 string, undefined

obj = {}; // 賦值
obj = {hello: undefined}; // 重新賦值
obj = {hello: 'hello'}; // 重新賦值
obj = {hello: null}; // 報錯
obj = {hello: 1}; // 報錯
obj = {hello: true}; // 報錯

// 屬性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 報錯
method('hello'); // 報錯

語義（Literal）類型一般用于聲明某個，某幾個特定的值（多個值用 | 分隔）

// @flow

let hello: 'hello'; // 聲明一個只能賦值 'hello' 的變量

hello = 'hello'; // 賦值
hello = 'hi'; // 報錯
hello = 12; // 報錯
hello = undefined; // 報錯
hello = null; // 報錯

function method(param: 1 | 'hi' | boolean): void { /* ... */ }

method(); // 報錯，缺少參數(shù)
method(1); // ok
method(1.2); // 報錯询兴，類型不對
method('hi'); // ok
method('hello'); // 報錯乃沙，類型不對
method(true); // ok
method(false); // ok

混合（Mixed）類型是指任意數(shù)據(jù)類型

// @flow

let hello: mixed; // 聲明一個 mixed 類型的變量

hello = 'hello'; // 賦值
hello = 'hi'; // 重新賦值
hello = 12; // 重新賦值
hello = undefined; // 重新賦值
hello = null; // 重新賦值

1.4 復合類型

數(shù)組

// @flow

let arr1: Array<boolean> = [true, false, true]; // 聲明一個元素是 boolean 的數(shù)組
arr1 = [true, 1]; // 報錯，1 不是 boolean 值
arr1 = ['']; // 報錯诗舰，'' 不是 boolean 值

let arr2: Array<string> = ["A", "B", "C"]; // 聲明一個元素是 string 的數(shù)組

let arr3: Array<mixed> = [1, true, "three"] // 聲明一個元素是任意類型的數(shù)組
arr1 = [true, 1]; // 重新賦值 
arr1 = ['']; // 重新賦值

map

// @flow

// 聲明一個 map 類型警儒，其有一個名為 foo，類型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 報錯眶根，缺少 foo 這個屬性值
obj1 = {foo: 1}; // 報錯蜀铲，屬性值 foo 的類型必須是 boolean
obj1 = {foo: false, bar: 'hello'}; // 重新賦值

// 聲明一個 map 類型，其有名為 foo, bar, baz属百，類型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: 'three',
};

更靜態(tài)類型可以查看 Type Annotations | Flow.

2. 使用工具

安裝

# 全局安裝
npm i -g flow-bin

# 本地安裝
npm i -D flow-bin

使用

flow init                       # 初始化項目

flow check path/to/dir          # 檢查這個目錄下所有的文件
flow check path/to/js/file      # 檢查指定文件

3. 配合 babel 一起使用

因為 flow 靜態(tài)類型只是對 js 的擴展记劝，并不是 js 原生支持的，也不能直接運行族扰，所以厌丑，一般 flow 都是配合 babel 一起使用的，這樣就可以在程序運行的時候進行靜態(tài)類型檢查别伏，達到我們想要的效果蹄衷。

3.1 babel-preset-flow

安裝 babel-preset-flow，這樣 babel 在轉(zhuǎn)碼 js 文件時就能識別 flow 的語法厘肮。

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

源文件（flow）

// @flow

// 定義一個 '兩個數(shù)字參數(shù)愧口，返回值也是數(shù)字' 的函數(shù)
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 報錯
plus(1); // 報錯
plus('hello'); // 報錯
plus('hello', ' hi'); // 報錯
plus({}, {}); // 報錯

plus(1, 2); // 3

轉(zhuǎn)碼后的文件

// 定義一個 '兩個數(shù)字參數(shù)，返回值也是數(shù)字' 的函數(shù)
function plus(a, b) {
  return a + b;
}

plus(); // 報錯
plus(1); // 報錯
plus('hello'); // 報錯
plus('hello', ' hi'); // 報錯
plus({}, {}); // 報錯

plus(1, 2); // 3

3.2 babel-plugin-flow-runtime

一般會在開發(fā)環(huán)境下类茂，使用 babel-plugin-flow-runtime 插件耍属，這樣就可以在開發(fā)的時候，實時檢查數(shù)據(jù)類型巩检，就像原生的運行 flow 靜態(tài)類型檢查一樣厚骗。（一般在產(chǎn)品環(huán)境不會使用這個功能，因為會額外消耗 js 的性能）

npm i -D babel-plugin-flow-runtime flow-runtime