大家好，我是前端西瓜哥，今天我們來看看 type 和 interface 的區別。

type 和 interface

type 是 類型別名，給一些類型的組合起別名，這樣能夠更方便地在各個地方使用。

假設我們的業務中，id 可以為字符串或數字，那么我們可以定義這么一個名為 ID 的 type：

type ID = string | number;

定義一個名為 Circle 的對象結構 type：

type Circle = {
  x: number;
  y: number;
  radius: number;
}

interface 是 接口。有點像 type，可以用來代表一種類型組合，但它范圍更小一些，只能描述對象結構。

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

它們寫法有一點區別，type 后面需要用 =，interface 后面不需要 =，直接就帶上 {。

范圍

type 能表示的任何類型組合。

interface 只能表示對象結構的類型。

繼承

interface 可以繼承（extends）另一個 interface。

下面代碼中，Rect 繼承了 Shape 的屬性，并在該基礎上新增了 width 和 height 屬性。

interface Shape {
 x: number;
  y: number;
}
// 繼承擴展
interface Rect extends Shape {
  width: number;
  height: number;
}
const rect: Rect = { x: 0, y: 0, width: 0, height: 0 };

interface 也可以繼承自 type，但只能是對象結構，或多個對象組成交叉類型（&）的 type。

再來看看 type 的繼承能力。

type 可以通過 & 的寫法來繼承 type 或 interface，得到一個交叉類型：

type Shape = {
    x: number;
    y: number;
}
type Circle = Shape & { r: number }
const circle: Circle = { x: 0, y: 0, r: 8 }

聲明合并

interface 支持聲明合并，文件下多個同名的 interface，它們的屬性會進行合并。

interface Point {
  x: number;
}
interface Point {
  y: number;
}
const point: Point = { x: 10, y: 30 };

需要注意的是，同名屬性的不能進行類型覆蓋修改，否則編譯不通過。比如我先聲明屬性 x 類型為 number，然后你再聲明屬性 x 為 string | numebr，就像下面這樣，編譯器會報錯。

interface Point {
  x: number;
}
interface Point {
  // 報錯
  // Property 'x' must be of type 'number', but here has type 'string | number'.
  x: string | number;
  y: number;
}

extends 可以將屬性的類型進行收窄，比如從 string | number 變成 string。

但聲明合并不行，類型必須完全一致。

type 不支持聲明合并，一個作用域內不允許有多個同名 type。

// 報錯：Duplicate identifier 'Point'.
type Point = {
  x: number;
}
// 報錯：Duplicate identifier 'Point'.
type Point = {
  y: number;
}

當然，如果有和 type 同名的 interface，也會報錯。

結尾

總結一下，type 和 interface 的不同點有：

1. type 后面有 =，interface 沒有。
2. type 可以描述任何類型組合，interface 只能描述對象結構。
3. interface 可以繼承自（extends）interface 或對象結構的 type。type 也可以通過 &做對象結構的繼承。
4. 多次聲明的同名 interface 會進行聲明合并，type 則不允許多次聲明。

大多數情況下，我更推薦使用 interface，因為它擴展起來會更方便，提示也更友好。& 真的很難用。