簡單對比，看看TypeScript中interface和type間的差別

interface和type的差別是什麼？這篇文章就來比較一下TypeScript中interface和type，帶大家了解一下interface和type間的差異，介紹一下在實際使用中選哪一個！

當我們使用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定義，應使用介面來提供聲明合併功能。除此之外，我們喜歡用哪個就用哪一個，但是在整個程式碼庫中應該要保持一致性。

英文原文網址：https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/

#作者：SARANSH KATARIA

更多程式相關知識，請造訪：程式設計入門！ ！

以上是簡單對比，看看TypeScript中interface和type間的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！