javascript静态分类如何解析flow的用法（详细）

交叉类型(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 代码了吧...
相关推荐：
Flow之一个新的Javascript静态类型检查器_javascript技巧
JavaScript静态类型检查工具FLOW简介_基础知识
以上就是javascript静态类型如何解析flow的用法（详细）的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：javascript静态分类如何解析flow的用法（详细）