前情提要：
昨天體驗過如何用PropTypes進行型別檢查後，今天來看看怎麼用Flow做型別檢查吧！

Flow是由Facebook出品，並且通常與React一起搭配服用。它使用特殊類型語法註解變數(variables)、函式(function)和React components。

使用Flow三步驟

1. 增加Flow到Propject的dependency
2. 確認Flow語法從編譯後的程式碼剝離
3. 增加類別註解並運行Flow檢查

安裝和設定方法React寫得太清楚了，我就不要在多述了，有興趣的小夥伴可以參考React-Flow

要使用flow檢查的時候別忘了在該檔案最上方加上註解

// @flow
// 或
/* @flow */

JavaScript有一些不同類型的原始型別：

• Booleans
• Strings
• Numbers
• null
• undefined (在Flow types使用void)
• Symbols (ES6的新類型，Flow尚未支援)

以下節錄一些比較有趣的範例

// @flow
function concat(a: string, b: string) {
  return a + b;
}

concat("A", "B"); // Works!
concat(1, 2); // Error!

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

method(new Number(42), new String("world"), new Boolean(false));

單純判斷字面上的value類別用小寫就可以了，
如果是大寫英文開頭的類型，就是指構造函數(constructor)，
需要特別記得大小所代表的意義是不同的
boolean和Boolean具有不同意義

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}

#### Booleans
```Boolean(0)```和```!!0```都是把型別轉成boolean的方法
acceptsBoolean(0);          // Error!
acceptsBoolean(Boolean(0)); // Works!
acceptsBoolean(!!0);        // Works!

Numbers

記得JavaScript把NaN和Infinity視為number~

// @flow
function acceptsNumber(value: number) {
  // ...
}

acceptsNumber(3.14);     // Works!
acceptsNumber(NaN);      // Works!
acceptsNumber(Infinity); // Works!

Strings

透過“+”號連結其他類型的value，我們可以把默默的把一些值轉換成字串(string)

"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"

但使用flow檢查靜態型別只會將字串+數字轉成字串視為合法

可能的類型

在宣告的型別前加上問號(?)，代表除了該類別外，也可能是null或undefined。
以下的例子可以看出，value可能是string、null或undefined

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

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

選配：function參數和object屬性

如果問號不是加在宣告的型別前，而是加在function的參數或object的屬性後，
則代表它可能是可有可無的，雖然是可有可無但不能是null或宣告型別以外的類型，
以下面例子為例，除了宣告的string和undefined或不給任何值以外，其他都不合格。

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

acceptsObject({ foo: "bar" });     // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null });      // Error!
acceptsObject({});                 // Works!

function acceptsOptionalString(value?: string) {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!

多種型別組合

如果宣告的型別使用「|」區隔其它型別，即表示有多種型別。
以下為例，value可能為string或number

function stringifyBasicValue(value: string | number) {
  return '' + value;
}

基於另一種型別的型別

funtion return的型別會和傳入function的value型別相同

function identity<T>(value: T): T {
  return value;
}

mixed 和 any

• mixed：可是是任何型別，但要先弄清楚是什麼，不然最後會導致錯誤
  無法確認value是什麼型別而檢查不合格

  // @flow
  function stringify(value: mixed) {
    // $ExpectError
    return "" + value; // Error!
  }
  
  stringify("foo");
  

  有先確認value的型別，檢查通過

  function stringify(value: mixed) {
    if (typeof value === 'string') {
      return "" + value; // Works!
    } else {
      return "";
    }
  }
  
  stringify("foo");
  

• any: 可以是任何型別，等於被放生的孩子，任何型別都可以過。

到這邊可以感受到，比起昨天的PropTypes，Flow可以做的檢查更多、範圍更廣，
先暫時整理到這邊，之號再繼續慢慢看flow的Documentation ˊ_>ˋ