概念
interface 接口
接口主要用於類型檢查，它只是一個結構契約，定義了具有相似的名稱和類型的對象結構。除此之外，接口還可以定義方法和事件。
type (alias)類型別名
不同於 interface 只能定義對象類型，type 聲明還可以定義基礎類型、聯合類型或交叉類型。
差異點
1. 定義類型的范圍
interface 只能定義對象類型, 而 type 聲明可以聲明任何類型，包括基礎類型、聯合類型或交叉類型。
- 基本類型
type Person = string;
- 聯合類型
interface Dog {
name: string;
}
interface Cat {
age: number;
}
type animal = Dog | Cat;
- 元組
interface Dog {
name: string;
}
interface Cat {
age: number;
}
type animal = [Dog, Cat];
2. 擴展性
接口可以 extends、implements,從而擴展多個接口或類。類型沒有擴展功能，只能交叉合並。
- interface extends interface
interface Person {
name: string;
}
interface User extends Person {
age: number;
}
- interface extends type
type Person = { name: string };
interface User extends Person {
age: number;
}
type 使用交叉類型&來合並不同成員的類型
- type & type
type Person = { name: string };
type User = Person & { age: number };
- type & interface
interface Person {
name: string;
}
type User = { age: number } & Person;
3. 合並聲明
定義兩個相同名稱的接口會合並聲明，定義兩個同名的 type 會出現異常。
interface Person {
name: string;
}
interface Person {
age: number;
}
// 合並為:interface Person { name: string age: number}
type User = {
name: string;
};
type User = {
age: number;
};
// 聲明重復報錯：標識符“User”重復。
4. type 可以獲取 typeof 返回的值作為類型
let div = document.createElement("div");
type B = typeof div; // HTMLDivElement