TS學(xué)習(xí)之對象的類型-接口

什么是接口

在面向?qū)ο笳Z言中玻淑,接口(Interfaces)是一個(gè)很重要的概念族壳,它是對行為的抽象括丁,而具體如何行動(dòng)需要由類(classes)去實(shí)現(xiàn)(implement)在跳。
TypeScript 中的接口是一個(gè)非常靈活的概念枪萄,除了可用于對類的一部分行為進(jìn)行抽象以外,也常用于對「對象的形狀(Shape)」進(jìn)行描述猫妙。

舉例:
interface Person {
name: string;
age: number;
}

let tom: Person = {
name: 'Tom',
age: 25
};
上面的例子中瓷翻,我們定義了一個(gè)接口 Person,接著定義了一個(gè)變量 tom割坠,它的類型是 Person齐帚。這樣,我們就約束了 tom 的形狀必須和接口 Person 一致彼哼。

定義接口的注意點(diǎn)

1对妄、接口一般首字母大寫
2、定義的變量比接口少了一些屬性是不允許的
3敢朱、多一些屬性也是不允許的

可選屬性

有時(shí)我們希望不要完全匹配一個(gè)形狀剪菱,那么可以用可選屬性:
interface Person {
name: string;
age?: number;
}

let tom: Person = {
name: 'Tom'
};

任意屬性

有時(shí)候我們希望一個(gè)接口允許有任意的屬性,可以使用如下方式:
interface Person {
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
name: 'Tom',
gender: 'male'
};
使用 [propName: string] 定義了任意屬性取 string 類型的值拴签。
PS: 一旦定義了任意屬性孝常,那么確定屬性和可選屬性的類型都必須是它的類型的子集:
interface Person {
name: string;
age?: number;
[propName: string]: string;
}

let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
上例中,任意屬性的值允許是 string蚓哩,但是可選屬性 age 的值卻是 number构灸,number 不是 string 的子屬性,所以報(bào)錯(cuò)了岸梨。

只讀屬性

有時(shí)候我們希望對象中的一些字段只能在創(chuàng)建的時(shí)候被賦值喜颁,那么可以用 readonly 定義只讀屬性:
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male'
};

tom.id = 9527;
例中,使用 readonly 定義的屬性 id 初始化后曹阔,又被賦值了半开,所以報(bào)錯(cuò)了。
注意: 只讀的約束存在于第一次給對象賦值的時(shí)候赃份,而不是第一次給只讀屬性賦值的時(shí)候
舉例:
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
name: 'Tom',
gender: 'male'
};

tom.id = 89757;
上例中稿茉,報(bào)錯(cuò)信息有兩處,第一處是在對 tom 進(jìn)行賦值的時(shí)候,沒有給 id 賦值漓库。

第二處是在給 tom.id 賦值的時(shí)候,由于它是只讀屬性园蝠,所以報(bào)錯(cuò)了渺蒿。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市彪薛,隨后出現(xiàn)的幾起案子茂装,更是在濱河造成了極大的恐慌,老刑警劉巖善延,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件少态,死亡現(xiàn)場離奇詭異,居然都是意外死亡易遣,警方通過查閱死者的電腦和手機(jī)彼妻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來豆茫,“玉大人侨歉,你說我怎么就攤上這事】辏” “怎么了幽邓?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長火脉。 經(jīng)常有香客問我牵舵,道長,這世上最難降的妖魔是什么倦挂? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任畸颅,我火速辦了婚禮,結(jié)果婚禮上妒峦,老公的妹妹穿的比我還像新娘重斑。我一直安慰自己,他們只是感情好肯骇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布窥浪。 她就那樣靜靜地躺著,像睡著了一般笛丙。 火紅的嫁衣襯著肌膚如雪漾脂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天胚鸯,我揣著相機(jī)與錄音骨稿,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛坦冠,可吹牛的內(nèi)容都是我干的形耗。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼辙浑,長吁一口氣:“原來是場噩夢啊……” “哼激涤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起判呕,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤倦踢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后侠草,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辱挥,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年边涕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晤碘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡奥吩,死狀恐怖哼蛆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情霞赫,我是刑警寧澤腮介,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站端衰,受9級(jí)特大地震影響叠洗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜旅东,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一灭抑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抵代,春花似錦腾节、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至康吵,卻和暖如春劈榨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晦嵌。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工同辣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拷姿,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓旱函,卻偏偏與公主長得像响巢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子棒妨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

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