[[406901]]

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

interface Point { 
    x: number; 
    y: number; 

當我們使用 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 的相似之處 
 
在討論它們的區別之前，我們先來看看它們的相似之處。 
 
} 

或者這樣定義：

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

~完，我是小智。

作者：SARANSH KATARIA

譯者：前端小智

來源：wisdomgeek

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