您好,登錄后才能下訂單哦!
這篇文章主要講解了“TypeScript中interface和type間的區(qū)別有哪些”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“TypeScript中interface和type間的區(qū)別有哪些”吧!
當我們使用 TypeScript 時,就會用到 interface
和 type
,平時感覺他們用法好像是一樣的,沒啥區(qū)別,都能很好的使用,所以也很少去真正的理解它們之間到底有啥區(qū)別。我們開發(fā)過經(jīng)?;蜻@么來定義類型:
interface Point { x: number; y: number; }
或者這樣定義:
type Point = { x: number; y: number; };
interface
和 type
之間的差異不僅僅是次要語法聲明。那么,今天我們就來看看這兩家伙之間存在啥不可告人的秘密。
TypeScript 有 boolean
、number
、string
等基本類型。如果我們想聲明高級類型,我們就需要使用類型別名。
類型別名指的是為類型創(chuàng)建新名稱。需要注意的是,我們并沒有定義一個新類型。使用type
關鍵字可能會讓我們覺得是創(chuàng)建一個新類型,但我們只是給一個類型一個新名稱。
所以我們所以 type 時,不是在創(chuàng)建新的類別,而是定義類型的一個別名而已。
與 type
相反,接口僅限于對象類型。它們是描述對象及其屬性的一種方式。類型別名聲明可用于任何基元類型、聯(lián)合或交集。在這方面,接口被限制為對象類型。
在討論它們的區(qū)別之前,我們先來看看它們的相似之處。
interface 和 type 都可以繼承。另一個值得注意的是,接口和類型別名并不互斥。類型別名可以繼承接口,反之亦然。
對于一個接口,繼承另一個接口
interface PartialPointX { x: number; } interface Point extends PartialPointX { y: number; }
或者,繼承一個類型
type PartialPointX = { x: number; }; interface Point extends PartialPointX { y: number; }
類型繼承另一個類型:
type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; };
或者,繼承一個接口:
interface PartialPointX { x: number; } type Point = PartialPointX & { y: number; };
類可以實現(xiàn)接口以及類型(TS 2.7+)。但是,類不能實現(xiàn)聯(lián)合類型。
interface Point { x: number; y: number; } class SomePoint implements Point { x = 1; y = 2; } type AnotherPoint = { x: number; y: number; }; class SomePoint2 implements AnotherPoint { x = 1; y = 2; } type PartialPoint = { x: number; } | { y: number; }; // Following will throw an error class SomePartialPoint implements PartialPoint { x = 1; y = 2; }
雖然接口可以被擴展和合并,但它們不能以聯(lián)合和交集的形式組合在一起。類型可以使用聯(lián)合和交集操作符來形成新的類型。
// object type PartialPointX = { x: number; }; type PartialPointY = { y: number; }; // 并集 type PartialPoint = PartialPointX | PartialPointY; // 交集 type PartialPoint = PartialPointX & PartialPointY;
TypeScript編譯器合并兩個或多個具有相同名稱的接口。 這不適用于類型。 如果我們嘗試創(chuàng)建具有相同名稱但不同的屬性的兩種類型,則TypeScript編譯器將拋出錯誤。
// These two declarations become: // interface Point { x: number; y: number; } interface Point { x: number; } interface Point { y: number; } const point: Point = { x: 1, y: 2 };
元組(鍵值對)只能通過type
關鍵字進行定義。
type Point = [x: number, y: number];
沒有辦法使用接口聲明元組。不過,我們可以在接口內部使用元組
interface Point { coordinates: [number, number] }
一般來說,接口和類型都非常相似。
對于庫或第三方類型定義中的公共API定義,應使用接口來提供聲明合并功能。除此之外,我們喜歡用哪個就用哪個,但是在整個代碼庫中應該要保持一致性。
感謝各位的閱讀,以上就是“TypeScript中interface和type間的區(qū)別有哪些”的內容了,經(jīng)過本文的學習后,相信大家對TypeScript中interface和type間的區(qū)別有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。