摘要：擴展靜態類型檢查語言與系列等語言有一點很大的不同，就是語言是弱類型語言。但其實很多開發人員還是比較喜歡用來開發項目，所以開發出來幫助語言擴展靜態類型檢查功能，規避上面提到的問題。

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

但其實很多開發人員還是比較喜歡用 js 來開發項目，所以 facebook 開發出 flow 來幫助 js 語言擴展靜態類型檢查功能，規避上面提到的問題。

flow 規定，在需要做 "flow 靜態類型檢查" 文件的開頭加上 // @flow 這段注釋，讓工具識別這個文件需要做靜態類型檢查，否則就會當作一般 js 文件對待，不做靜態類型檢查。

flow 靜態類型幾乎可以應用到所有的 js 對象，包括 es6 擴展的 class, module 等，也包括 jsx 語法。

以下是一些基礎的靜態類型舉例，更詳細的可以查看 Type Annotations | Flow.

與 js 的基本數據類型類似，包括:

boolean: 對應 js 的 Boolean 類型

number: 對應 js 的 Number 類型

string: 對應 js 的 String 類型

null: 對應 js 的 null

void: 對應 js 的 undefined

正常的 js 代碼

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

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

hello = []; // 重新賦值

加上 flow 靜態類型檢查擴展的代碼

// @flow

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

hello = 2 * 2; // 報錯

hello = []; // 報錯

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

正常的 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 靜態類型檢查擴展的代碼

// @flow

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

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

plus(1, 2); // 3

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

// @flow

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

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

可選（Optional）類型一般用于對象屬性或者函數參數，在名稱后面加一個 ?，包含類型本身、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(); // 報錯，缺少參數
method(1); // ok
method(1.2); // 報錯，類型不對
method("hi"); // ok
method("hello"); // 報錯，類型不對
method(true); // ok
method(false); // ok

混合（Mixed）類型是指任意數據類型

// @flow

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

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

數組

// @flow

let arr1: Array = [true, false, true]; // 聲明一個元素是 boolean 的數組
arr1 = [true, 1]; // 報錯，1 不是 boolean 值
arr1 = [""]; // 報錯，"" 不是 boolean 值

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

let arr3: Array = [1, true, "three"] // 聲明一個元素是任意類型的數組
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",
};

更靜態類型可以查看 Type Annotations | Flow.

安裝

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

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

使用

flow init                       # 初始化項目

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

因為 flow 靜態類型只是對 js 的擴展，并不是 js 原生支持的，也不能直接運行，所以，一般 flow 都是配合 babel 一起使用的，這樣就可以在程序運行的時候進行靜態類型檢查，達到我們想要的效果。

安裝 babel-preset-flow，這樣 babel 在轉碼 js 文件時就能識別 flow 的語法。

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

源文件（flow）

// @flow

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

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

plus(1, 2); // 3

轉碼后的文件

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

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

plus(1, 2); // 3

一般會在開發環境下，使用 babel-plugin-flow-runtime 插件，這樣就可以在開發的時候，實時檢查數據類型，就像原生的運行 flow 靜態類型檢查一樣。（一般在產品環境不會使用這個功能，因為會額外消耗 js 的性能）

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

.babelrc

{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}

源文件（flow）

// @flow

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

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

plus(1, 2); // 3

轉碼后的文件

import t from "flow-runtime";


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

t.annotate(plus, t.function(t.param("a", t.number()), t.param("b", t.number()), t.return(t.number())));
plus(); // 報錯
plus(1); // 報錯
plus("hello"); // 報錯
plus("hello", " hi"); // 報錯
plus({}, {}); // 報錯

plus(1, 2); // 3

這個時候，js 文件就會導入 flow-runtime 模塊，對 plus 函數的參數 a, b 和返回值進行數據類型檢查，如果不符合數據定義，就會報錯。

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）