美文网首页Vue.js 资料
vue源码学习 --- flow(4)

vue源码学习 --- flow(4)

作者: 2分_08b6 | 来源:发表于2019-01-10 15:41 被阅读7次

    原文地址: https://flow.org/en/docs/types/objects/

    一. Object

    1. 基本语法
    2. Exact object types (精确对象)
    3. Objects as maps(不知道怎么翻译)

    1. 基本语法

    var obj1: { foo: boolean } = { foo: true };
    

    (1) obj中没定义bar属性,所以不能使用

    var obj2 = { foo: "bar" };
    // obj2.bar; // Error!
    

    (2) property?: boolean (支持自身类型和undefined)

    var obj3: { foo?: boolean } = {};
    
    obj3.foo = true;    // Works!
    // obj3.foo = 'hello'; // Error
    // obj3.foo = null; // Error!
    obj3.foo = undefined; // Work!
    // obj3.foo = 1; // Error!
    // obj3.foo = {}; // Error!
    // obj3.foo = []; // Error!
    

    (3) property?: string (支持自身类型和undefined, 另外对象类型)

    function acceptsObject(value: { foo?: string }) {
      // ...
    }
    
    acceptsObject({ foo: "bar" });     // Works!
    acceptsObject({ foo: undefined }); // Works!
    // acceptsObject({ foo: null });     // Error!
    acceptsObject({});                // Works!
    // acceptsObject([]);                // Error!
    // acceptsObject(1);                 // Error!
    // acceptsObject(true);              // Error!
    

    (4) 封闭对象, 当生命一个封闭对象,就不能再为对象重新指定对象属性类型,且不能为对象新增属性; 相应的, 非封闭对象可以修改属性类型和新增属性. 但是属性类型应该以最后一次定义为准

    // 封闭类型, 已经在对象上定义了属性

    var obj4 = {
      foo: 1,
      bar: true,
      baz: 'three'
    };
    // var bat: string  = obj4.bat; // Error!
    // obj4['bat'] = 2;                         // Error!
    
    // 非封闭类型, 空的对象,没有任何属性
    var obj5 = {};
    
    obj5['bat'] = true;                         // Works!
    var bat: boolean  = obj5.bat; // Works!
    
    var obj6 = {};
    obj6.prop = true;
    obj6.prop = "hello";
    // var val1: boolean = obj6.prop; // Error!
    var val2: string  = obj6.prop; // Works!
    var val3: string = obj6.bat;     // Works!
    

    2. Exact object types (精确对象)

    可以精确定义对象中应该有的属性

    // method的参数是一个对象,但是对象必须包含foo属性
    function method(obj: { foo: string }) {
      // ...
    }
    method({
      foo: "test", // Works!
      bar: 42      // Works!
    });
    
    // {| foo: string |} 只支持赋值对象为{ foo: "Hello" },不能包含其他属性
    // var foo: {| foo: string |} = { foo: "Hello", bar: "World!" }; // Error!
    
    type FooT = {| foo: string |};
    type BarT = {| bar: number |};
    
    type FooBarFailT = FooT & BarT;
    type FooBarT = {| ...FooT, ...BarT |};
    
    // const fooBarFail: FooBarFailT = {}; // Error!
    // const fooBarFail: FooBarFailT = { foo: '123', bar: 12 }; // Error!
    const fooBar: FooBarT = { foo: '123', bar: 12 }; // Works!
    

    3. Objects as maps(不知道怎么翻译)

    指定对象属性本身的类型, 可能是对应于es6的Map类型(在Map中,key值类型不是必须一致的)

    var o: { [string]: number } = {};
    o["foo"] = 0;
    o["bar"] = 1;
    // o[1] = 3;                                        // Error!
    var foo: number = o["foo"];
    

    相关文章

      网友评论

        本文标题:vue源码学习 --- flow(4)

        本文链接:https://www.haomeiwen.com/subject/mzearqtx.html