Vue.js 资料

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

2019-01-10  本文已影响7人  2分_08b6

原文地址: 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"];
上一篇下一篇

猜你喜欢

热点阅读