TypeScript對象的類型——接口


在 TypeScript 中,我們使用接口(Interfaces)來定義對象的類型锅论。


什么是接口

在面向?qū)ο笳Z言中药薯,接口(Interfaces)是一個很重要的概念,它是對行為的抽象铸史,而具體如何行動需要由類(classes)去實現(xiàn)(implements)盒刚。

TypeScript 中的接口是一個非常靈活的概念,除了可用于對類的一部分行為進行抽象以外倒庵,也常用于對「對象的形狀(Shape)」進行描述。

簡單的例子
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

上面的例子中炫刷,我們定義了一個接口 Person擎宝,接著定義了一個變量 tom,它的類型是 Person浑玛。這樣绍申,我們就約束了 tom 的形狀必須和接口 Person 一致。

接口一般首字母大寫。有的編程語言中會建議接口的名稱加上 I 前綴极阅。
定義的變量比接口少了一些屬性是不允許的:

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

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

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

多一些屬性也是不允許的:

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

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

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可見胃碾,賦值的時候,變量的形狀必須和接口的形狀保持一致筋搏。

可選屬性

有時我們希望不要完全匹配一個形狀仆百,那么可以用可選屬性:

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};
interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

可選屬性的含義是該屬性可以不存在。

這時仍然不允許添加未定義的屬性:

interface Person {
    name: string;
    age?: number;
}

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

// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

任意屬性

有時候我們希望一個接口允許有任意的屬性奔脐,可以使用如下方式:

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

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

使用 [propName: string] 定義了任意屬性取 string 類型的值俄周。
需要注意的是,一旦定義了任意屬性髓迎,那么確定屬性和可選屬性都必須是它的子屬性:

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

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

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

上例中峦朗,任意屬性的值允許是 string,但是可選屬性 age 的值卻是 number排龄,number 不是 string 的子屬性波势,所以報錯了。

另外橄维,在報錯信息中可以看出尺铣,此時 { name: 'Tom', age: 25, gender: 'male' } 的類型被推斷成了 { [x: string]: string | number; name: string; age: number; gender: string; },這是聯(lián)合類型和接口的結(jié)合挣郭。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末迄埃,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子兑障,更是在濱河造成了極大的恐慌侄非,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件流译,死亡現(xiàn)場離奇詭異逞怨,居然都是意外死亡,警方通過查閱死者的電腦和手機福澡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門叠赦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人革砸,你說我怎么就攤上這事除秀。” “怎么了算利?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵册踩,是天一觀的道長。 經(jīng)常有香客問我效拭,道長暂吉,這世上最難降的妖魔是什么胖秒? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮慕的,結(jié)果婚禮上阎肝,老公的妹妹穿的比我還像新娘。我一直安慰自己肮街,他們只是感情好风题,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著低散,像睡著了一般俯邓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上熔号,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天稽鞭,我揣著相機與錄音,去河邊找鬼引镊。 笑死朦蕴,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的弟头。 我是一名探鬼主播吩抓,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赴恨!你這毒婦竟也來了疹娶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤伦连,失蹤者是張志新(化名)和其女友劉穎雨饺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惑淳,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡额港,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了歧焦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片移斩。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖绢馍,靈堂內(nèi)的尸體忽然破棺而出向瓷,到底是詐尸還是另有隱情,我是刑警寧澤舰涌,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布猖任,位于F島的核電站,受9級特大地震影響舵稠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一哺徊、第九天 我趴在偏房一處隱蔽的房頂上張望室琢。 院中可真熱鬧,春花似錦落追、人聲如沸盈滴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽巢钓。三九已至,卻和暖如春疗垛,著一層夾襖步出監(jiān)牢的瞬間症汹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工贷腕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留背镇,地道東北人。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓泽裳,卻偏偏與公主長得像瞒斩,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子涮总,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

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