這篇文章帶給大家的內容是關於javascript靜態類型如何解析flow的用法（詳細），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

起因

遍尋百度,google,沒發現flow的中文文檔,這對國內顯然是不友好的,雖說flow 平時用不著, 但是一般框架都會用一下,以便用戶可以準確的使用框架,可以避免很多謎一樣的BUG,既然沒有,那我就來翻譯一下咯.計劃先翻譯類型註釋(types annotations)部分,安裝的一搜一大把.

flow 類型註解

當你的類型不註解的時候, flow 就不起作用了,so 來看看flow 類型可以如何註解. 可不是// 這個註解

原始類型

javascript 一共有6鐘原始資料型別.

Booleans
Strings
Numbers
null
#undefined (void in Flow types)
Symbols (new in ECMAScript 2015, not yet supported in Flow) flow 不支援symbols

原始類型分兩種,一種是字面量的, 一種是包裝過的比如3 跟Number( 3);
例如下面這樣,你只能傳字面量.booleans 除外

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

method(3.14, "hello", true);

登入後複製

booleans

#flow 可以識別!!x 和Boolean(0) 的明確類型轉換的boolean

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

acceptsBoolean(0);          // Error! 错误
acceptsBoolean(Boolean(0)); // Works! OK
acceptsBoolean(!!0);        // Works! OK

登入後複製

number

數字就很明確了

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

acceptsNumber(42);       // Works!
acceptsNumber(3.14);     // Works!
acceptsNumber(NaN);      // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo");    // Error!

登入後複製

string

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

acceptsString("foo"); // Works!
acceptsString(false); // Error!

登入後複製

js中字串會有隱藏的轉換

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

登入後複製

# flow 只支援數字和字串的隱藏轉換

    // @flow
    "foo" + "foo"; // Works!
    "foo" + 42;    // Works!
    "foo" + {};    // Error!
    "foo" + [];    // Error!

登入後複製

如果你要使用, 必須要明確轉換

    // @flow
    "foo" + String({});     // Works!
    "foo" + [].toString();  // Works!
    "" + JSON.stringify({}) // Works!

登入後複製

null 和undefined

在flow中undefined 是void

    // @flow
    function acceptsNull(value: null) {
      /* ... */
    }

    function acceptsUndefined(value: void) {
      /* ... */
    }
    acceptsNull(null);      // Works!
    acceptsNull(undefined); // Error!
    acceptsUndefined(null);      // Error!
    acceptsUndefined(undefined); // Works!

登入後複製

可能的型別

可能的型別, 是要用再那些可選的值, 你可以使用一個問號來標記他, 證明這個值是可選的,並不是必須的

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

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

登入後複製

物件屬性選項

你可以用一個問號來表示該物件的某個屬性是可有可無的

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

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

登入後複製

這個值可以是undefined 但是他不能是null

函數參數的選項

加問號標示,這個函數的參數可可選的

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

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

登入後複製

函數的預設參數

es5 的新特性

    // @flow
    function acceptsOptionalString(value: string = "foo") {
      // ...
    }

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

登入後複製

symbol

flow未支援

字面類型

flow 不只可以指定類型, 他還可以指定某個特定的值. 非常牛掰

如:

    // @flow
    function acceptsTwo(value: 2) {
      // ...
    }

    acceptsTwo(2);   // Works!
    // $ExpectError
    acceptsTwo(3);   // Error!
    // $ExpectError
    acceptsTwo("2"); // Error!

登入後複製

如:

// @flow
function getColor(name: "success" | "warning" | "danger") {
  switch (name) {
    case "success" : return "green";
    case "warning" : return "yellow";
    case "danger"  : return "red";
  }
}
getColor("success"); // Works!
getColor("danger");  // Works!
// $ExpectError
getColor("error");   // Error!

登入後複製

雜交型(mixed types)

你可以符合多個型別

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

登入後複製

你可以像java 的泛型一樣(有區別)去標明一個類型,下面的例子標明,該函數返回的類型跟傳進函數的類型相同.

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

登入後複製

你可以這樣來標記一個函數可以接受任何類型的參數

    function getTypeOf(value: mixed): string {
      return typeof value;
    }

登入後複製

當你使用mixed 時候, 雖然你可以傳進任何類型, 但是你返回的時候必須要明確他是什麼類型, 不然就報錯

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

    stringify("foo");

登入後複製

任何類型(any type)

不要搞混any 和mixed, 如果你想跳過型別檢查,那你就用any 吧

    // @flow
    function add(one: any, two: any): number {
      return one + two;
    }

    add(1, 2);     // Works.
    add("1", "2"); // Works.
    add({}, []);   // Works.

登入後複製

只要兩種情況,可以使用any

舊程式碼新增flow 類型檢查,並且用其他類型的會引起大量錯誤
當你明確的知道你的程式碼不能通過類型檢查的時候,

避免洩漏any

當你宣告了傳進的參數的any的時候,那麼你回傳的參數也都是any , 避免這種情況, 需要切斷它

    // @flow
    function fn(obj: any) /* (:number) */ {
      let foo: number = obj.foo; // 这句才是重点, 切断 any
      let bar /* (:number) */ = foo * 2;
      return bar;
    }

    let bar /* (:number) */ = fn({ foo: 2 });
    let baz /* (:string) */ = "baz:" + bar;

登入後複製

可能類型(maybe type)

就是上面提到的可以用? 問號標記他是可選的類型

變數類型(variable type )

var - 宣告一個變數,選擇性賦值
#let - 宣告一個區塊層級變數,選擇性輔助
const - 宣告一個區塊級變數,並賦值,且不能再賦值

#在flow 分為兩組, 一組是let 和var 可以再次賦值, 另一組是const 不能再賦值

const

const 可以注入你賦值的型別, 或是你自己手動的指定型別

    // @flow
    const foo /* : number */ = 1;
    const bar: number = 2;

登入後複製

let 和var

跟上面一樣, 這兩個也可以自動的注入類型

但是若你自動注入的類型, 你重新賦值修改的類型的時候並不會得到報錯

#如果語句,函數,和其他的條件代碼,可以精確的指出他是什麼類型,那麼就可以避免flow 的檢查不然就報錯

        // @flow
        let foo = 42;

        function mutate() {
          foo = true;
          foo = "hello";
        }

        mutate();

        // $ExpectError
        let isString: string = foo; // Error!

登入後複製

#盡量避免上面的用法(個人推薦)

函數型別(function type)

函數只有兩種用法, 要嘛參數, 要嘛回傳值

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

    concat("foo", "bar"); // Works!
    // $ExpectError
    concat(true, false);  // Error!

登入後複製

宣告函數##

#同上

箭頭函數

    (str: string, bool?: boolean, ...nums: Array<number>) => void

登入後複製

帶回調的箭頭函數

    function method(callback: (error: Error | null, value: string | null) => void) {
      // 上面表明, 这和函数接受的参数 只能是 error null 和 string 然后染回一个 undefined
    }

登入後複製

可選參數

    // @flow
    function method(optionalValue?: string) {
      // ...
    }

    method();          // Works.
    method(undefined); // Works.
    method("string");  // Works.
    // $ExpectError
    method(null);      // Error!

登入後複製

剩餘參數的用法(rest parameter)

    function method(...args: Array<number>) {
      // ...  使类似java 泛型的 样子 来声明他的类型
    }

登入後複製

函數傳回值

        function method(): number {
          // 若是标明了返回类型, 那么你的函数一定要有返回值,如果有条件判断语句,那么每个条件都要有返回值
        }

登入後複製

函數的this

你不用註解this flow 會自動偵測上下文來決定this 的型別

    function method() {
      return this;
    }

    var num: number = method.call(42);
    // $ExpectError
    var str: string = method.call(42);

登入後複製

但下面這種情況,flow 就會報錯

    function truthy(a, b): boolean {
      return a && b;
    }

    function concat(a: ?string, b: ?string): string {
      if (truthy(a, b)) {
        // $ExpectError 问题出现再truthy 上 可能是 经过了隐式的类型转换
        return a + b;
      }
      return '';
    }

登入後複製

你可以這樣來修復上面的問題, 再truthy 上使用%check

    function truthy(a, b): boolean %checks {
      return !!a && !!b;
    }

    function concat(a: ?string, b: ?string): string {
      if (truthy(a, b)) {
        return a + b;
      }
      return '';
    }

登入後複製

如果你想跳过 flow 的类型检查 , 除了用any 再函数上你还可以用 Function 不过这是不稳定的,你应该避免使用他

    function method(func: Function) {
      func(1, 2);     // Works.
      func("1", "2"); // Works.
      func({}, []);   // Works.
    }

    method(function(a: number, b: number) {
      // ...
    });

登入後複製

对象类型

对象类型语法

    // @flow
    var obj1: { foo: boolean } = { foo: true };
    var obj2: {
      foo: number,
      bar: boolean,
      baz: string,
    } = {
      foo: 1,
      bar: true,
      baz: 'three',
    };

登入後複製

可选的对象属性

使用了flow, 对象不能访问不存再的属性, 以前是返回undefined 现在访问报错,如果想知道访问并且赋值会不会报错,(我建议你自己试一下)

你可以使用 ? 号来标明这个属性是可选的,可以为undefined

    // @flow
    var obj: { foo?: boolean } = {};

    obj.foo = true;    // Works!
    // $ExpectError
    obj.foo = 'hello'; // Error!

登入後複製

标明了类型的属性, 他们可以是undefined(属性赋值为undefined) 或者空着不写(空对象,), 但是他们不可以是null

密封对象 (seald objects)

密封对象的概念不懂的可以去了解一下, 就是这个对象不可以修改,但是引用的对象还是可以修改的; 在flow中这种对象知道所有你声明的属性的值的类型

    // @flow
    var obj = {
      foo: 1,
      bar: true,
      baz: 'three'
    };

    var foo: number  = obj.foo; // Works!
    var bar: boolean = obj.bar; // Works!
    // $ExpectError
    var baz: null    = obj.baz; // Error!
    var bat: string  = obj.bat; // Error!

登入後複製

而且flow 不允许你往这种对象上面添加新的属性, 不然报错

非密封对象属性的重新赋值

注意了,flow 是静态类型检测工具并不是动态的, 所以他不能在运行时判断你的变量是什么类型的, 所以他只能判断你这个对象是否是你赋值过的类型之一.

    // @flow
    var obj = {};

    if (Math.random()) obj.prop = true;
    else obj.prop = "hello";

    // $ExpectError
    var val1: boolean = obj.prop; // Error!
    // $ExpectError
    var val2: string  = obj.prop; // Error!
    var val3: boolean | string = obj.prop; // Works!

登入後複製

普通对象的非确定属性的类型是不安全的

    var obj = {};

    obj.foo = 1;
    obj.bar = true;

    var foo: number  = obj.foo; // Works!
    var bar: boolean = obj.bar; // Works!
    var baz: string  = obj.baz; // Works? // 问题在这里 这里的baz 是不存在的属性, 把他定位string 并且给他一个undefined 是可行的, 但是这部安全, 避免使用

登入後複製

额外对象类型 (extra object type)

在一个期望正常对象类型的地方,传一个有着额外属性的对象是安全的

    // @flow
    function method(obj: { foo: string }) {
      // ...
    }

    method({
      foo: "test", // Works!
      bar: 42      // Works!
    });

登入後複製

flow 也支持精确的对象类型, 就是对象不能具有额外的属性;

// @flow
var foo: {| foo: string |} = { foo: "Hello", bar: "World!" }; // Error!

登入後複製

如果你想结合精确对象, 需要用到 type 关键字, 我也不知道这个算不算操作符,应该是flow 底层编译支持的, 原声js 并没有这个东西

    // @flow

    type FooT = {| foo: string |};
    type BarT = {| bar: number |};

    type FooBarFailT = FooT & BarT; // 通过这个& 操作可以把两种情况合并,匹配到 foo 和 bar 同时都有的对象 而且类型必须跟声明的一样
    type FooBarT = {| ...FooT, ...BarT |};

    const fooBarFail: FooBarFailT = { foo: '123', bar: 12 }; // Error!
    const fooBar: FooBarT = { foo: '123', bar: 12 }; // Works!

登入後複製

对象的maps (objects as maps)

虽然有了maps 这个数据结构但是把对象当作maps 使用依然很常见

    // @flow
    var o: { [string]: number } = {}; // 制定key值的类型, 可以设置这个类型下的任何key值
    o["foo"] = 0;
    o["bar"] = 1;
    var foo: number = o["foo"];

登入後複製

索引也是一个可选的名字

    // @flow
    var obj: { [user_id: number]: string } = {};
    obj[1] = "Julia";
    obj[2] = "Camille";
    obj[3] = "Justin";
    obj[4] = "Mark";

登入後複製

索引可以和命名属性混合

    // @flow
    var obj: {
      size: number,
      [id: number]: string // 此处混合了 索引和命名
    } = {
      size: 0
    };

    function add(id: number, name: string) {
      obj[id] = name;
      obj.size++;
    }

登入後複製

对象类型(Object Type)

有时候你想创任意的对象, 那么你就可以传一个空对象,或者一个Object 但是后者是不安全的, 建议避免使用

数组类型

    let arr: Array<number> = [1, 2, 3];
    let arr1: Array<boolean> = [true, false, true];
    let arr2: Array<string> = ["A", "B", "C"];
    let arr3: Array<mixed> = [1, true, "three"]

登入後複製

简写

    let arr: number[] = [0, 1, 2, 3];
    let arr1: ?number[] = null;   // Works!
    let arr2: ?number[] = [1, 2]; // Works!
    let arr3: ?number[] = [null]; // Error!

登入後複製

?number[] === ?Array

数组的访问时不安全的

    // @flow
    let array: Array<number> = [0, 1, 2];
    let value: number = array[3]; // Works.// 这里超出了数组的容量

登入後複製

你可以通过下面这样的做法来避免, flow 并未修复这个问题, 所以需要开发者自己注意

    let array: Array<number> = [0, 1, 2];
    let value: number | void = array[1];

    if (value !== undefined) {
      // number
    }

登入後複製

$ReadOnlyArray

这个可以标记一个只能读不能写的数组

    // @flow
    const readonlyArray: $ReadOnlyArray\<number> = [1, 2, 3]

登入後複製

但是引用类型还是可以写的

    // @flow
    const readonlyArray: $ReadOnlyArray<{x: number}> = [{x: 1}];
    readonlyArray[0] = {x: 42}; // Error!
    readonlyArray[0].x = 42; // OK

登入後複製

tuple types

这是一种新的类型, 是一种短的列表,但是时又限制的集合,在 javascript 中这个用数组来声明

    // 一个类型对应一个 item
    let tuple1: [number] = [1];
    let tuple2: [number, boolean] = [1, true];
    let tuple3: [number, boolean, string] = [1, true, "three"];

登入後複製

可以把取出的值赋值给具有一样类型的变量, 如果index 超出了索引范围,那么就会返回undefined 在 flow 中也就是 void

    // @flow
    let tuple: [number, boolean, string] = [1, true, "three"];

    let num  : number  = tuple[0]; // Works!
    let bool : boolean = tuple[1]; // Works!
    let str  : string  = tuple[2]; // Works!

登入後複製

如果flow 不知道你要访问的时是那么类型, 那么他忽返回所有可能的类型,

    // @flow
    let tuple: [number, boolean, string] = [1, true, "three"];

    function getItem(n: number) {
      let val: number | boolean | string = tuple[n];
      // ...
    }

登入後複製

tuple类型的长度一定要严格等于你声明时候的长度

tuple 不能匹配数组类型, 这也是他们的差别

tuple 只能用 array 的 join() 方法其他的都不可以用,否则报错

class type

javascript 的class 再flow 可以是值也可以是类型

    class MyClass {
      // ...
    }

    let myInstance: MyClass = new MyClass();

登入後複製

class 里的字段一定要声明类型了才可以用

    // @flow
    class MyClass {
      prop: number;// 如果没有这行, 下的赋值会报错,因为prop 没确定类型
      method() {
        this.prop = 42;
      }
    }

登入後複製

再外部使用的字段,必须要再class 的块里面声明一次

    // @flow
    function func_we_use_everywhere (x: number): number {
      return x + 1;
    }
    class MyClass {
      static constant: number; // 内部声明
      static helper: (number) => number;
      method: number => number;
    }
    MyClass.helper = func_we_use_everywhere
    MyClass.constant = 42 // 外部使用
    MyClass.prototype.method = func_we_use_everywhere

登入後複製

声明并且赋值的语法

    class MyClass {
      prop: number = 42;
    }

登入後複製

类的泛型

    class MyClass<A, B, C> {
      property: A;
      method(val: B): C {
        // ...
      }
    }

登入後複製

如果你要把class作为一个类型,你声明了几个泛型, 你就要传几个参数

    // @flow
    class MyClass<A, B, C> {
      constructor(arg1: A, arg2: B, arg3: C) {
        // ...
      }
    }

    var val: MyClass<number, boolean, string> = new MyClass(1, true, 'three');

登入後複製

别名类型(type aliases)

跟上面提到的 type 关键字一样

    // @flow
    type MyObject = {
      foo: number,
      bar: boolean,
      baz: string,
    };

登入後複製

这个是类型别名可以在不同的地方复用

    // @flow
    type MyObject = {
      // ...
    };

    var val: MyObject = { /* ... */ };
    function method(val: MyObject) { /* ... */ }
    class Foo { constructor(val: MyObject) { /* ... */ } }

登入後複製

别名泛型

    type MyObject<A, B, C> = {
      property: A,
      method(val: B): C,
    };

登入後複製

别名泛型是参数化的,也就是你用了以后, 你声明的所有参数你全部都要传

    // @flow
    type MyObject<A, B, C> = {
      foo: A,
      bar: B,
      baz: C,
    };

    var val: MyObject<number, boolean, string> = {
      foo: 1,
      bar: true,
      baz: 'three',
    };

登入後複製

不透明的类型别名(opaque type aliases)

通过类型系统的加强抽象

不透明类型别名是不允许访问定义在文件之外的的基础类型的类型别名.

    opaque type ID = string;  // 一个新的关键字 并且这是声明一个不透明类型别名的语法

登入後複製

不透明类型别名可以复用

    // @flow
    // 在这个例子,我理解的是 外部只能访问到这个文件的ID 类型, 并不能访问到这个文件里面的string 基础类型. 这就是不透明的类型别名
    opaque type ID = string;

    function identity(x: ID): ID {
      return x;
    }
    export type {ID};

登入後複製

你可以可选的加一个子类型约束 在一个 不透明的类型别名的类型后面

    opaque type Alias: SuperType = Type;

登入後複製

任何类型都可以作为父类型或者 不透明的类型别名 的类型

    opaque type StringAlias = string;
    opaque type ObjectAlias = {
      property: string,
      method(): number,
    };
    opaque type UnionAlias = 1 | 2 | 3;
    opaque type AliasAlias: ObjectAlias = ObjectAlias;
    opaque type VeryOpaque: AliasAlias = ObjectAlias;

登入後複製

不透明别名类型的类型检查

在文件内部

在文件内部跟正常的类型别名一样

    //@flow
    opaque type NumberAlias = number;

    (0: NumberAlias);

    function add(x: NumberAlias, y: NumberAlias): NumberAlias {
        return x + y;
    }
    function toNumberAlias(x: number): NumberAlias { return x; }
    function toNumber(x: NumberAlias): number { return x; }

登入後複製

在文件外部

当你inport 一个不透明的类型别是时候,他会隐藏基础类型

exports.js

    export opaque type NumberAlias = number;

登入後複製

imports.js

    import type {NumberAlias} from './exports';

    (0: NumberAlias) // Error: 0 is not a NumberAlias!

    function convert(x: NumberAlias): number {
      return x; // Error: x is not a number!
    }

登入後複製

子类型约束(subTyping Constraints)

当你添加一个子类型约束在一个不透明的类型别名上时, 我们允许不透明类型在被定义文件的外部被用作父类型

exports.js

    export opaque type ID: string = string;

登入後複製

imports.js

    import type {ID} from './exports';

    function formatID(x: ID): string {
        return "ID: " + x; // Ok! IDs are strings.
    }

    function toID(x: string): ID {
        return x; // Error: strings are not IDs.
    }

登入後複製

当你创建一个拥有子类型约束的不透明类型别名, 这个类型在类型中的位置一定要是这个类型的子类型在父类中的位置 (这里的概念应该是跟泛型的概念差不多, 不相关的类型不可以强制转换)

    //@flow
    opaque type Bad: string = number; // Error: number is not a subtype of string
    opaque type Good: {x: string} = {x: string, y: number};

登入後複製

泛型

不透明类型别名有他们自己的泛型, 但是他们跟正常的泛型是差不多的

    // @flow
    opaque type MyObject<A, B, C>: { foo: A, bar: B } = {
      foo: A,
      bar: B,
      baz: C,
    };

    var val: MyObject<number, boolean, string> = {
      foo: 1,
      bar: true,
      baz: 'three',
    };

登入後複製

接口类型 (interface Types)

接口可以使一些拥有相同方法的类归为一类

    // @flow
    interface Serializable {
      serialize(): string;
    }

    class Foo {
      serialize() { return '[Foo]'; }
    }

    class Bar {
      serialize() { return '[Bar]'; }
    }

    const foo: Serializable = new Foo(); // Works!
    const bar: Serializable = new Bar(); // Works!

登入後複製

如果你怕出错, 你可以手动的使用 implements 告诉flow 哪些类实现了哪些接口,这可以预防你修改class 的时候出现错误

    // @flow
    interface Serializable {
      serialize(): string;
    }

    class Foo implements Serializable {
      serialize() { return '[Foo]'; } // Works!
    }

    class Bar implements Serializable {
      // $ExpectError
      serialize() { return 42; } // Error! // 不能返回一个number
    }

登入後複製

不要忘记了接口可以同时实现多个

接口的属性也是可以可选的

    interface MyInterface {
      property?: string;
    }

登入後複製

接口跟maps 联合

    interface MyInterface {
      [key: string]: number;
    }

登入後複製

接口泛型

    interface MyInterface<A, B, C> {
      property: A;
      method(val: B): C;
    }

登入後複製

规矩还在,泛型你用了几个 ,你使用的时候就要传递几个参数

    // @flow
    interface MyInterface<A, B, C> {
      foo: A;
      bar: B;
      baz: C;
    }

    var val: MyInterface<number, boolean, string> = {
      foo: 1,
      bar: true,
      baz: 'three',
    };

登入後複製

接口属性的只读,与只写

接口属性默认是不可变的, 但是你可以添加修饰符让他们变成 covariant只读或者Contravariance 只写;(关于不可变想了解的请看这里)

    interface MyInterface {
      +covariant: number;     // read-only 只读 不能修改
      -contravariant: number; // write-only 只能修改, 不能读取
    }

登入後複製

混合只读

    interface MyInterface {
      +readOnly: number | string;
    }

登入後複製

允许指定多个类型

    // @flow
    // $ExpectError
    interface Invariant {  property: number | string }
    interface Covariant { +readOnly: number | string }

    var value1: Invariant = { property: 42 }; // Error!
    var value2: Covariant = { readOnly: 42 }; // Works!

登入後複製

协变(covariant) 属性通常是只读的,他比正常的属性更有用

    // @flow
    interface Invariant {  property: number | string }
    interface Covariant { +readOnly: number | string }

    function method1(value: Invariant) {
      value.property;        // Works!
      value.property = 3.14; // Works!
    }

    function method2(value: Covariant) {
      value.readOnly;        // Works!
      // $ExpectError
      value.readOnly = 3.14; // Error!
    }

登入後複製

contravariant 逆变只写属性允许你传递更少的类型

    // @flow
    interface Invariant     {  property: number }
    interface Contravariant { -writeOnly: number }

    var numberOrString = Math.random() > 0.5 ? 42 : 'forty-two';

    // $ExpectError
    var value1: Invariant     = { property: numberOrString };  // Error!
    var value2: Contravariant = { writeOnly: numberOrString }; // Works! 可以看到 上面声明了 number 可是这个numberOrString 有两种返回值, 他只能匹配一种 他野是可以传递的

登入後複製

通常比正常的属性更有用

    interface Invariant     {   property: number }
    interface Contravariant { -writeOnly: number }

    function method1(value: Invariant) {
      value.property;        // Works!
      value.property = 3.14; // Works!
    }

    function method2(value: Contravariant) {
      // $ExpectError
      value.writeOnly;        // Error!
      value.writeOnly = 3.14; // Works!
    }

登入後複製

联盟类型 (union types)

类型的值可能是很多类型之一

使用 | 分开

    Type1 | Type2 | ... | TypeN

登入後複製

可以竖直写

    type Foo =
      | Type1
      | Type2
      | ...
      | TypeN

登入後複製

联盟类型可以组合

    type Numbers = 1 | 2;
    type Colors = 'red' | 'blue'

    type Fish = Numbers | Colors;

登入後複製

联盟类型请求一个,但是所有的都要处理

当你调用一个要接受联盟类型的函数的时候,你一定要传入一个在联盟类型中的类型,但是在函数里面你要处理所有的类型.

    // @flow
    // $ExpectError
    function toStringPrimitives(value: number | boolean | string): string { // Error!
      if (typeof value === 'number') {
        return String(value);
      } else if (typeof value === 'boolean') {
        return String(value);
      }
      // 注意这个函数会报错是因为 你用了if 条件语句 并没有在所有的情况中返回值, 如果返回了undefined 那么就不符合 string 类型,所以就报错了
    }

登入後複製

联盟改进

这里是上面演示的说明,可以使用 typeof 关键字来应对逐一的类型

    // @flow
    function toStringPrimitives(value: number | boolean | string) {
      if (typeof value === 'number') {
        return value.toLocaleString([], { maximumSignificantDigits: 3 }); // Works!
      }
      // ...
    }

登入後複製

脱节联盟 (disjoint Unions)

概念就不说了,难懂来看一下例子

想象我们有一个处理发送了请求之后响应的函数,当请求成功你那个的时候,我们得到一个对象,这个对象有一个 success 属性值为true 还有一个值我们需要更新的值, value

    { success: true, value: false };

登入後複製

当请求失败的时候,我们得到一个对象这个对象有一个 success 属性值为false,和一个 error 属性,定义了一个错误.

    { success: false, error: 'Bad request' };

登入後複製

我们可以尝试用一个对象去描述这两个对象, 然而我们很快就发生了一个问题, 就是我们知道一个属性的存在与否(value 或者 error ) 取决于success(因为success为 true 那么 value才会存在) 但是 Flow 不知道.

    // @flow
    type Response = {
      success: boolean,
      value?: boolean,
      error?: string
    };

    function handleResponse(response: Response) {
      if (response.success) {
        // $ExpectError
        var value: boolean = response.value; // Error!
      } else {
        // $ExpectError
        var error: string = response.error; // Error!
      }
    }

登入後複製

取而代之,如果我们创建一个两个对象类型的联盟类型,Flow 会知道基于success 属性我们会使用哪个对象

    // @flow
    type Success = { success: true, value: boolean };
    type Failed  = { success: false, error: string };

    type Response = Success | Failed; (这就是脱节联盟)

    function handleResponse(response: Response) {
      if (response.success) {
        var value: boolean = response.value; // Works!
      } else {
        var error: string = response.error; // Works!
      }
    }

登入後複製

脱节联盟与精确类型仪器使用

脱节连门要求你使用单一的属性去区分每个对象类型,你不能用两个不同的属性,去区分两个不同的类型

    // @flow
    type Success = { success: true, value: boolean };
    type Failed  = { error: true, message: string };

    function handleResponse(response:  Success | Failed) {
      if (response.success) {
        // $ExpectError
        var value: boolean = response.value; // Error!
      }
    }
    // 不懂的跟上面的对比一下, 两个对象必须要有一个属性是相同的

登入後複製

然而你可以用精确对象类型

    // @flow
    type Success = {| success: true, value: boolean |};
    type Failed  = {| error: true, message: string |};
    // 精确的也就是说 不可以扩展对象, 他该是哪个就是哪个 不存在混乱

    type Response = Success | Failed;

    function handleResponse(response: Response) {
      if (response.success) {
        var value: boolean = response.value;
      } else {
        var message: string = response.message;
      }
    }

登入後複製

交叉类型(intersection types)

所有不同类型的类型值

    // @flow
    type A = { a: number };
    type B = { b: boolean };
    type C = { c: string };

    function method(value: A & B & C) {
      // ...
    }

    // $ExpectError
    method({ a: 1 }); // Error!
    // $ExpectError
    method({ a: 1, b: true }); // Error!
    method({ a: 1, b: true, c: 'three' }); // Works!

登入後複製

可以把上面的连门类型理解为或把交叉类型理解为& 语法都是一样的

    type Foo =
      & Type1
      & Type2
      & ...
      & TypeN
    type Foo = Type1 & Type2;
    type Bar = Type3 & Type4;

    type Baz = Foo & Bar;

登入後複製

我们在函数中和联盟函数相反, 我们不如传入所有的类型,但是在函数里面我们只需要做处理一种情况就OK

    // @flow
    type A = { a: number };
    type B = { b: boolean };
    type C = { c: string };

    function method(value: A & B & C) {
      var a: A = value;
      var b: B = value;
      var c: C = value;
    }

登入後複製

不可能的交叉类型

你总不能一个值是数字的同时又是字符串吧

    // @flow
    type NumberAndString = number & string;

    function method(value: NumberAndString) {
      // ...
    }

    // $ExpectError
    method(3.14); // Error!
    // $ExpectError
    method('hi'); // Error!

登入後複製

交叉对象类型

当你创建一个交叉对象类型时,你是在合并了他们所有的属性在一个对象上

    // @flow
    type One = { foo: number };
    type Two = { bar: boolean };

    type Both = One & Two;

    var value: Both = {
      foo: 1,
      bar: true
    };

登入後複製

如果声明的属性类型相同, 就相当于你声明了一个交叉类型的属性

typeof Types (这个不好翻译因为 typeof 是js中的一个关键字,在此我就不翻译这个了)

js有一个typeof 关键字,他会返回一个字符串说明

然而他是有限制的,typeof 对象数组 null 都是 object

所以在flow中, 他把这个关键字重载了

    // @flow
    let num1 = 42;
    let num2: typeof num1 = 3.14;     // Works!
    // $ExpectError
    let num3: typeof num1 = 'world';  // Error!

    let bool1 = true;
    let bool2: typeof bool1 = false;  // Works!
    // $ExpectError
    let bool3: typeof bool1 = 42;     // Error!

    let str1 = 'hello';
    let str2: typeof str1 = 'world'; // Works!
    // $ExpectError
    let str3: typeof str1 = false;   // Error!

登入後複製

你可以typeof 任何值

    // @flow
    let obj1 = { foo: 1, bar: true, baz: 'three' };
    let obj2: typeof obj1 = { foo: 42, bar: false, baz: 'hello' };

    let arr1 = [1, 2, 3];
    let arr2: typeof arr1 = [3, 2, 1];

登入後複製

引用类型的 typeof 继承行为

你可以用typeof 的返回值作为一个类型

但是如果你typeof 一个指定了字面量类型的变量, 那么那个类型就是字面量的值了

    // @flow
    let num1: 42 = 42;
    // $ExpectError
    let num2: typeof num1 = 3.14;    // Error!
    // 看这里 num1 的type 指定了是 42 那么 typeof num1 不会返回number 会返回 42 所以3.14 不符合

    let bool1: true = true;
    // $ExpectError
    let bool2: typeof bool1 = false; // Error!

    let str1: 'hello' = 'hello';
    // $ExpectError
    let str2: typeof str1 = 'world'; // Error!

登入後複製

其他类型的 typeof 继承行为

    // @flow
    class MyClass {
      method(val: number) { /* ... */ }
    }

    class YourClass {
      method(val: number) { /* ... */ }
    }

    // $ExpectError
    let test1: typeof MyClass = YourClass; // Error!
    let test2: typeof MyClass = MyClass;   // Works!
    // 看这里 es6 的类并不是一种类型, 只是一种语法糖而已,内部机制还是原型链, 所以 typeof MyClass 不会等于YourClass

登入後複製

镶嵌表达式类型(type casting expression)

把一个值镶嵌到不同的类型

有时不使用函数和变量去声明一个类型是很有用的,所以flow 支持多种方式去干这个事情(声明一个类型)

语法

    (value: Type)

登入後複製

这个表达式可以出现在表达式能出现的任何地方

    let val = (value: Type);
    let obj = { prop: (value: Type) };
    let arr = ([(value: Type), (value: Type)]: Array<Type>);

登入後複製

也可以这样写

    (2 + 2: number);

登入後複製

类型断言

    // @flow
    let value = 42;
    // 这个的作用就是把变量 嵌入到一个类型中去
    (value: 42);     // Works!
    (value: number); // Works!
    (value: string); // Error!

登入後複製

类型嵌入

这个表达式是由返回值的,如果你接收了这个返回值,你会得到一个新的类型

    // @flow
    let value = 42;

    (value: 42);     // Works!
    (value: number); // Works!

    let newValue = (value: number);

    // $ExpectError
    (newValue: 42);     // Error!
    (newValue: number); // Works!

登入後複製

通过 any 去转换类型

    let value = 42;

    (value: number); // Works!
    // $ExpectError
    (value: string); // Error!
    // 这里先把value 变成any 再变成string
    let newValue = ((value: any): string);

    // $ExpectError
    (newValue: number); // Error!
    // 生效了
    (newValue: string); // Works!

登入後複製

但是合适不安全且不推荐的,但是有时候他很有用

通过类型断言来进行类型检查

若是你想检查一个对象的类型,你不能直接 typeof 你得先用断言表达式去转换然后再用typeof 去检查

想这样:

    function clone(obj: { [key: string]: mixed }) {
      const cloneobj = {};
      Object.keys(obj).forEach(key => {
        cloneobj[key] = obj[key];
      });

      return ((cloneobj: any): typeof obj);
    }

    const obj = clone({foo: 1})
    (obj.foo: 1) // 出错!

登入後複製

    function clone(obj) {
      (obj: { [key: string]: mixed });
      const cloneobj = {};
      Object.keys(obj).forEach(key => {
        cloneobj[key] = obj[key];
      });

      return ((cloneobj: any): typeof obj);
    }

    const obj = clone({foo: 1})
    (obj.foo: 1) // ok!

登入後複製

工具类型

flow 提供了一系列的工具类型, 以便于再一些常见场景使用

详情看这里

模块类型

上面由类似的, 就是一个export 一个 import

注释类型

感觉没多大用处, 可以做一些标记,这个可以在不通过flow 编译的情况下直接使用在js文件上

    // @flow

    /*::
    type MyAlias = {
      foo: number,
      bar: boolean,
      baz: string,
    };
    */

    function method(value /*: MyAlias */) /*: boolean */ {
      return value.bar;
    }

    method({ foo: 1, bar: true, baz: ["oops"] });

登入後複製

看完能看懂所有flow 代码了吧...