Interface 和 Type 的差別

1.TypeScript 編譯器推論結果不同

Type

宣告 Type 時，所使用的名稱代表的是其背後的型別結構

1type Person = {
2  name: string;
3  age: number;
4  gender: string;
5};
6type Employee = Person;
7
8/**
9 * TypeScript 編譯器推論結果為：
10 * type Employee =
11 * {
12 *   name: string;
13 *   age: number;
14 *   gender: string;
15 * }
16 **/

Interface

Interface 介面宣告時會使用名稱代表 TypeScript 編譯器推論的結果

1interface Person {
2  name: string;
3  age: number;
4  gender: string;
5}
6type Employee = Person; // TypeScript 編譯器推論結果為： type Employee = Person

2.Type 和 Interface 的擴展性差異

Type

Type 較適合靜態、變動性較小的資料結構，並且可以表達任一型別。

1type Phone = {
2  brand: string;
3  model: string;
4  price: number;
5};

雖然 Type 無法擴充，但可以使用交集運算子 & 來合併多個 Type。 然而，與 Interface 不同的是，Type 不能進行重新開放（declaration merging），這意味著無法多次聲明一個 Type 來合併屬性。

1type Person = {
2  name: string;
3};
4
5type Employee = Person & {
6  salary: number;
7};

另外，Type 不僅限於物件也可以用於其他型別的別名，像是聯合型別、函數型別、原始型別等。

1// 原始型別別名
2
3type StringAlias = string;
4
5// 聯合型別
6type UnionType = string | number;
7
8// 函數型別
9type FunctionType = (a: number, b: number) => number;

Interface

Interface 的宣告較為靈活，可以用來描述物件、函式、類別、JSON物件等...，並且可以自由的進行擴充。

1interface Person {
2  name: string;
3}
4
5interface Person {
6  age: number;
7}
8
9// 合併後的 Person 會包含 name 和 age 屬性
10const person: Person = {
11  name: "John",
12  age: 30,
13};

Interface 支持宣告合併（declaration merging），這表示可以多次宣告同一個 Interface，並且 TypeScript 會將它們合併。

1interface Phone {
2  brand: string;
3  model: string;
4  price: number;
5}
6
7interface SmartPhone extends Phone {
8  os: string;
9}