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

type 和 interface

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

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

type ID = string | number;

定義一個名為 Circle 的對象結(jié)構(gòu) type：

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

interface 是 接口。有點(diǎn)像 type，可以用來代表一種類型組合，但它范圍更小一些，只能描述對象結(jié)構(gòu)。

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

它們寫法有一點(diǎn)區(qū)別，type 后面需要用 =，interface 后面不需要 =，直接就帶上 {。

范圍

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

interface 只能表示對象結(jié)構(gòu)的類型。

繼承

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

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

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

interface 也可以繼承自 type，但只能是對象結(jié)構(gòu)，或多個對象組成交叉類型（&）的 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，它們的屬性會進(jìn)行合并。

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

需要注意的是，同名屬性的不能進(jìn)行類型覆蓋修改，否則編譯不通過。比如我先聲明屬性 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 可以將屬性的類型進(jìn)行收窄，比如從 string | number 變成 string。

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

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

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

當(dāng)然，如果有和 type 同名的 interface，也會報錯。

結(jié)尾

總結(jié)一下，type 和 interface 的不同點(diǎn)有：

1. type 后面有 =，interface 沒有。
2. type 可以描述任何類型組合，interface 只能描述對象結(jié)構(gòu)。
3. interface 可以繼承自（extends）interface 或?qū)ο蠼Y(jié)構(gòu)的 type。type 也可以通過 &做對象結(jié)構(gòu)的繼承。
4. 多次聲明的同名 interface 會進(jìn)行聲明合并，type 則不允許多次聲明。

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