這篇文章主要講解了“TypeScript中interface和type間的區別有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“TypeScript中interface和type間的區別有哪些”吧！

創新互聯長期為上1000家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為薩嘎企業提供專業的網站制作、成都做網站，薩嘎網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發。

當我們使用 TypeScript 時，就會用到 interface 和 type，平時感覺他們用法好像是一樣的，沒啥區別，都能很好的使用，所以也很少去真正的理解它們之間到底有啥區別。我們開發過經常或這么來定義類型：

interface Point {
    x: number;
    y: number;
}

或者這樣定義：

type Point = {
    x: number;
    y: number;
};

interface 和 type之間的差異不僅僅是次要語法聲明。那么，今天我們就來看看這兩家伙之間存在啥不可告人的秘密。

類型和類型別名

TypeScript 有 boolean、number、string 等基本類型。如果我們想聲明高級類型，我們就需要使用類型別名。

類型別名指的是為類型創建新名稱。需要注意的是，我們并沒有定義一個新類型。使用type關鍵字可能會讓我們覺得是創建一個新類型，但我們只是給一個類型一個新名稱。

所以我們所以 type 時，不是在創建新的類別，而是定義類型的一個別名而已。

接口

與 type相反，接口僅限于對象類型。它們是描述對象及其屬性的一種方式。類型別名聲明可用于任何基元類型、聯合或交集。在這方面，接口被限制為對象類型。

interface 和 type 的相似之處

在討論它們的區別之前，我們先來看看它們的相似之處。

兩者都可以被繼承

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; };

實現

類可以實現接口以及類型（TS 2.7+）。但是，類不能實現聯合類型。

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;
}

interface 和 type 的區別

并集和交集類型

雖然接口可以被擴展和合并，但它們不能以聯合和交集的形式組合在一起。類型可以使用聯合和交集操作符來形成新的類型。

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// 并集
type PartialPoint = PartialPointX | PartialPointY;

// 交集
type PartialPoint = PartialPointX & PartialPointY;

聲明合并

TypeScript編譯器合并兩個或多個具有相同名稱的接口。 這不適用于類型。 如果我們嘗試創建具有相同名稱但不同的屬性的兩種類型，則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間的區別有哪些”的內容了，經過本文的學習后，相信大家對TypeScript中interface和type間的區別有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網頁名稱：TypeScript中interface和type間的區別有哪些-創新互聯
URL網址：http://www.yijiale78.com/article22/ddhhjc.html

成都網站建設公司_創新互聯，為您提供網站導航、品牌網站制作、全網營銷推廣、網站維護、網站設計、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯