Typescript 中的 interface 和 type 的區(qū)別

interface VS type

大家使用 typescript 總會使用到 interface 和 type爵政,官方規(guī)范 稍微說了下兩者的區(qū)別

  • An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
  • An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

但是沒有太具體的例子初茶。

明人不說暗話霹崎,直接上區(qū)別阎曹。

相同點

都可以描述一個對象或者函數(shù)

interface

|

interface User {

name: string

age: number

}

interface SetUser {

(name: string, age: number): void;

}

|

type

|

type User = {

name: string

age: number

};

type SetUser = (name: string, age: number): void;

|

都允許拓展(extends)

interface 和 type 都可以拓展乒躺,并且兩者并不是相互獨立的澡谭,也就是說 interface 可以 extends type, type 也可以 extends interface 溃肪。 雖然效果差不多,但是兩者語法不同粉楚。

interface extends interface

|

interface Name {

name: string;

}

interface User extends Name {

age: number;

}

|

type extends type

|

type Name = {

name: string;

}

type User = Name & { age: number };

|

interface extends type

|

type Name = {

name: string;

}

interface User extends Name {

age: number;

}

|

type extends interface

|

interface Name {

name: string;

}

type User = Name & {

age: number;

}

|

不同點

type 可以而 interface 不行

  • type 可以聲明基本類型別名辣恋,聯(lián)合類型,元組等類型

|

// 基本類型別名

type Name = string

// 聯(lián)合類型

interface Dog {

wong();

}

interface Cat {

miao();

}

type Pet = Dog | Cat

// 具體定義數(shù)組每個位置的類型

type PetList = [Dog, Pet]

|

  • type 語句中還可以使用 typeof 獲取實例的 類型進(jìn)行賦值

|

// 當(dāng)你想獲取一個變量的類型時模软,使用 typeof

let div = document.createElement(``'div'``);

type B = typeof div

|

  • 其他騷操作

|

type StringOrNumber = string | number;

type Text = string | { text: string };

type NameLookup = Dictionary<string, Person>;

type Callback<T> = (data: T) => void;

type Pair<T> = [T, T];

type Coordinates = Pair<number>;

type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

|

interface 可以而 type 不行

interface 能夠聲明合并

|

interface User {

name: string

age: number

}

interface User {

sex: string

}

/*

User 接口為 {

name: string

age: number

sex: string

}

*/

|

總結(jié)

一般來說伟骨,如果不清楚什么時候用interface/type,能用 interface 實現(xiàn)燃异,就用 interface , 如果不能就用 type 携狭。其他更多詳情參看 官方規(guī)范文檔

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市回俐,隨后出現(xiàn)的幾起案子逛腿,更是在濱河造成了極大的恐慌,老刑警劉巖仅颇,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件单默,死亡現(xiàn)場離奇詭異,居然都是意外死亡忘瓦,警方通過查閱死者的電腦和手機(jī)搁廓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人境蜕,你說我怎么就攤上這事蝙场。” “怎么了粱年?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵售滤,是天一觀的道長。 經(jīng)常有香客問我逼泣,道長,這世上最難降的妖魔是什么舟舒? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任拉庶,我火速辦了婚禮,結(jié)果婚禮上秃励,老公的妹妹穿的比我還像新娘氏仗。我一直安慰自己,他們只是感情好夺鲜,可當(dāng)我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布皆尔。 她就那樣靜靜地躺著,像睡著了一般币励。 火紅的嫁衣襯著肌膚如雪慷蠕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天食呻,我揣著相機(jī)與錄音流炕,去河邊找鬼。 笑死仅胞,一個胖子當(dāng)著我的面吹牛每辟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播干旧,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼渠欺,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了椎眯?” 一聲冷哼從身側(cè)響起挠将,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎编整,沒想到半個月后捐名,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡闹击,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年镶蹋,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡贺归,死狀恐怖淆两,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拂酣,我是刑警寧澤秋冰,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站婶熬,受9級特大地震影響剑勾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赵颅,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一虽另、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧饺谬,春花似錦捂刺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拔鹰,卻和暖如春仪缸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背列肢。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工腹殿, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人例书。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓锣尉,卻偏偏與公主長得像,于是被迫代替她去往敵國和親决采。 傳聞我的和親對象是個殘疾皇子自沧,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,037評論 2 355

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