flow中文文檔(四)

在JavaScript中绞佩,對(duì)象可以以多種不同的方式使用寺鸥。為了支持所有不同的用例,有許多不同的方法可以輸入它們品山。

對(duì)象類型語(yǔ)法

對(duì)象類型盡可能地嘗試匹配JavaScript中對(duì)象的語(yǔ)法。使用冒號(hào)使用花括號(hào){}和名稱 - 值對(duì):用逗號(hào)分隔烤低,肘交。

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

注意:以前的對(duì)象類型使用分號(hào);用于拆分名稱 - 值對(duì)。雖然語(yǔ)法仍然有效扑馁,但您應(yīng)該使用逗號(hào)涯呻,

可選對(duì)象類型屬性

在JavaScript中,訪問不存在的屬性的計(jì)算結(jié)果為undefined腻要。這是JavaScript程序中常見的錯(cuò)誤來源复罐,因此Flow將這些錯(cuò)誤轉(zhuǎn)換為類型錯(cuò)誤。

// @flow
var obj = { foo: "bar" };
// $ExpectError
obj.bar; // Error!  cannot get `obj.bar` beacuse property `bar` is missing in object litera [1].

如果您有一個(gè)有時(shí)沒有屬性的對(duì)象雄家,可以通過在對(duì)象類型中的屬性名稱之后添加問號(hào)使其成為可選屬性效诅。

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

obj.foo = true;    // Works!
// $ExpectError
obj.foo = 'hello'; // Error! cannot assign `'hello'` to `obj.foo` because string [1] is incomptible with boolean [2]

除了它們的設(shè)置值類型之外,這些可選屬性可以是 void趟济,也可以完全省略乱投。但是,它們不能為 null顷编。

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

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

密封對(duì)象

使用其屬性創(chuàng)建對(duì)象時(shí)戚炫,可在Flow中創(chuàng)建密封對(duì)象類型。這些密封對(duì)象將知道您聲明它們的所有屬性及其值的類型媳纬。

// @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!

但是當(dāng)對(duì)象被密封時(shí)双肤,F(xiàn)low將不允許您向它們添加新屬性。

// @flow
var obj = {
  foo: 1
};

// $ExpectError
obj.bar = true;    // Error!
// $ExpectError
obj.baz = 'three'; // Error!

此處的解決方法可能是將您的對(duì)象轉(zhuǎn)換為未密封的對(duì)象钮惠。

未密封對(duì)象

創(chuàng)建沒有任何屬性的對(duì)象時(shí)茅糜,可以在Flow中創(chuàng)建未密封的對(duì)象類型。這些未密封的對(duì)象不會(huì)知道它們的所有屬性萌腿,并允許您添加新屬性限匣。

// @flow
var obj = {};

obj.foo = 1;       // Works!
obj.bar = true;    // Works!
obj.baz = 'three'; // Works!

屬性的推斷類型(類型注釋)將成為您設(shè)置的屬性。

重新分配未密封的對(duì)象屬性

類似于var和let變量,如果重新分配未密封對(duì)象的屬性米死,默認(rèn)情況下锌历,F(xiàn)low會(huì)為其指定所有可能分配的類型。

// @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!

有時(shí)峦筒,F(xiàn)low能夠在重新分配后(確定地)確定屬性的類型究西。在這種情況下,F(xiàn)low將為其提供已知類型物喷。

// @flow
var obj = {};

obj.prop = true;
obj.prop = "hello";

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

隨著Flow變得越來越聰明卤材,它將在更多場(chǎng)景中找出屬性的類型。

未密封對(duì)象上的未知屬性查找是不安全的

未密封的對(duì)象允許隨時(shí)寫入新屬性峦失。 Flow確保讀取與寫入兼容扇丛,但不確保在讀取之前發(fā)生寫入(按執(zhí)行順序)。

這意味著永遠(yuǎn)不會(huì)檢查沒有匹配寫入的未密封對(duì)象的讀取尉辑。這是Flow的一種不安全行為帆精,將來可能會(huì)得到改善。

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?

精確對(duì)象類型

在Flow中隧魄,傳遞具有額外屬性的對(duì)象被認(rèn)為是安全的卓练,其中期望正常的對(duì)象類型。

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

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

有時(shí)禁用此行為并僅允許一組特定屬性很有用购啄。為此襟企,F(xiàn)low支持“精確”對(duì)象類型。

{| foo: string, bar: number |}

與常規(guī)對(duì)象類型不同狮含,將具有“額外”屬性的對(duì)象傳遞給精確對(duì)象類型無效顽悼。

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

確切對(duì)象類型的交集可能無法按預(yù)期工作。如果需要組合確切的對(duì)象類型辉川,請(qǐng)使用對(duì)象類型傳播:

// @flow

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

type FooBarFailT = FooT & BarT;
type FooBarT = {| ...FooT, ...BarT |};

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

ObjectsAsMaps

較新版本的JavaScript標(biāo)準(zhǔn)包含一個(gè)Map類表蝙,但將對(duì)象用作Maps仍然很常見。在此用例中乓旗,對(duì)象可能會(huì)添加屬性并在其整個(gè)生命周期中檢索府蛇。此外,屬性鍵甚至可能不是靜態(tài)已知的屿愚,因此寫出類型注釋是不可能的汇跨。

對(duì)于像這樣的對(duì)象,F(xiàn)low提供了一種特殊的屬性妆距,稱為“索引器屬性”穷遂。索引器屬性允許使用與索引器鍵類型匹配的任何鍵進(jìn)行讀寫。

// @flow
var o: { [string]: number } = {};
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";

當(dāng)對(duì)象類型具有索引器屬性時(shí)蚪黑,假定屬性訪問具有帶注釋的類型,即使該對(duì)象在運(yùn)行時(shí)沒有該槽中的值。程序員有責(zé)任確保訪問是安全的忌穿,就像數(shù)組一樣抒寂。

var obj: { [number]: string } = {};
obj[42].length; //沒有類型錯(cuò)誤,但會(huì)在運(yùn)行時(shí)拋出

索引器屬性可以與命名屬性混合使用:

// @flow
var obj: {
  size: number,
  [id: number]: string
} = {
  size: 0
};

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

Object Type

有時(shí)編寫接受任意對(duì)象的類型是有用的掠剑,對(duì)于那些你應(yīng)該寫{}的類似:

function method(obj: {}) {
  // ...
}

但是屈芜,如果您需要選擇退出類型檢查程序,并且不想一直轉(zhuǎn)到任何類型檢查程序朴译,則可以改為使用Object井佑。Object 不安全,應(yīng)該避免眠寿。

例如躬翁,以下代碼不會(huì)報(bào)告任何錯(cuò)誤:

function method(obj: Object) {
  obj.foo = 42;               // Works.
  let bar: boolean = obj.bar; // Works.
  obj.baz.bat.bam.bop;        // Works.
}

method({ baz: 3.14, bar: "hello" });
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市盯拱,隨后出現(xiàn)的幾起案子姆另,更是在濱河造成了極大的恐慌,老刑警劉巖坟乾,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蝶防,居然都是意外死亡甚侣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門间学,熙熙樓的掌柜王于貴愁眉苦臉地迎上來殷费,“玉大人,你說我怎么就攤上這事低葫∠晗郏” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵嘿悬,是天一觀的道長(zhǎng)实柠。 經(jīng)常有香客問我,道長(zhǎng)善涨,這世上最難降的妖魔是什么窒盐? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮钢拧,結(jié)果婚禮上蟹漓,老公的妹妹穿的比我還像新娘。我一直安慰自己源内,他們只是感情好葡粒,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般嗽交。 火紅的嫁衣襯著肌膚如雪卿嘲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天轮纫,我揣著相機(jī)與錄音腔寡,去河邊找鬼。 笑死掌唾,一個(gè)胖子當(dāng)著我的面吹牛放前,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播糯彬,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼凭语,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了撩扒?” 一聲冷哼從身側(cè)響起似扔,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎搓谆,沒想到半個(gè)月后炒辉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泉手,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年黔寇,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斩萌。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缝裤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出颊郎,到底是詐尸還是另有隱情憋飞,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布姆吭,位于F島的核電站榛做,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏猾编。R本人自食惡果不足惜瘤睹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望答倡。 院中可真熱鬧轰传,春花似錦、人聲如沸瘪撇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至恕曲,卻和暖如春鹏氧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背佩谣。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工把还, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人茸俭。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓吊履,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親调鬓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子艇炎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)腾窝,斷路器缀踪,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • 關(guān)于Mongodb的全面總結(jié) MongoDB的內(nèi)部構(gòu)造《MongoDB The Definitive Guide》...
    中v中閱讀 31,912評(píng)論 2 89
  • 【日更166】 這兩天在網(wǎng)上看到一部短片《下一個(gè)十年,你會(huì)在哪里虹脯?》驴娃,劇情是爺孫倆一起跑步,然后小孫女嫌棄剛畢業(yè)的...
    唐斬2086閱讀 1,087評(píng)論 0 1