目錄

• 接口（interface）
• 類型（type）
• interface vs type
• 結論

TypeScript 是由 Microsoft 開發的一種開源的編程語言。它是 JavaScript 的超集，添加了靜態類型和其他功能，使代碼更為健壯且易于維護。在 TypeScript 中，有兩種主要的定義自定義類型的方式：接口和類型。盡管它們在外觀上可能相似，但它們之間有一些關鍵的區別。在本文中，我們將討論 TypeScript 中接口和類型之間的區別并給出具體代碼示例。

接口（interface）

interface 是一種定義復雜類型的方式，它可以用來描述對象類型、函數類型、類類型、數組類型、字面量類型等。interface 通常用來描述一個對象的外部形狀（Shape），即這個對象有哪些屬性、屬性的類型是什么、方法的簽名是什么等。例如：

interface Person {
? name: string;
? age: number;
? sayHello(): void;
}
class Student implements Person {
? name: string;
? age: number;
? constructor(name: string, age: number) {
? ? this.name = name;
? ? this.age = age;
? }
? sayHello() {
? ? console.log(`Hi, my name is ${this.name}, and I"m ${this.age} years old.`);
? }
}
const student = new Student("Tom", 20);
student.sayHello(); // Hi, my name is Tom, and I"m 20 years old.

上面的代碼中，我們定義了一個 Person 接口，它包含 name 和 age 屬性以及 sayHello 方法。然后我們定義了一個 Student 類，它實現了 Person 接口，因此必須實現 name、age 和 sayHello。在 sayHello 方法中，我們使用模板字符串輸出學生的姓名和年齡。

類型（type）

type 是一種定義簡單類型的方式，它可以用來定義基本類型、聯合類型、交叉類型、字面量類型等。type 可以給一個類型起一個別名，以便重復使用。例如：

type Status = "active" | "inactive";
type Person = {
? name: string;
? age: number;
? status: Status;
};

上面的代碼定義了一個 Status 類型和一個 Person 類型。Status 類型是一個字符串字面量類型，它只能是 'active' 或 'inactive' 中的一個。Person 類型描述了一個人對象的形狀，包括 name 屬性、age 屬性和 status 屬性，其中 status 屬性的類型是 Status。

雖然 interface 和 type 在定義類型時有些不同，但在使用時它們是具有一定通用性的。例如，我們可以使用 interface 定義函數的參數類型和返回值類型，也可以使用 type 定義同樣的類型，例如：

interface Sum {
? (a: number, b: number): number;
}
type Multiply = (a: number, b: number) => number;

上面的代碼分別使用 interface 和 type 定義了一個加法函數類型 Sum 和一個乘法函數類型 Multiply，它們都接受兩個參數并返回它們的運算結果。

interface vs type

接口可以被繼承，而類型不能。

接口可以通過 extends 關鍵字來擴展基礎接口，例如：

interface Person {
? name: string;
? age: number;
}
interface Employee extends Person {
? company: string;
}
const employee: Employee = { name: "John", age: 30, company: "Acme Inc." };

類型不能被繼承。

類型只能定義一次，而接口可以定義多次并且會自動合并。

類型可以定義一次，例如：

type Status = "active" | "inactive";
const status: Status = "active";

如果試圖再次定義同名類型，則會報錯。
接口可以定義多次，并且會自動合并同名屬性，例如：

interface Person {
? name: string;
}
interface Person {
? age: number;
}
const person: Person = { name: "John", age: 30 };

接口可以定義可選屬性和只讀屬性，而類型不能。

接口可以定義可選屬性和只讀屬性，例如：

interface Person {
? name: string;
? age?: number;
? readonly email: string;
}
const person1: Person = { name: "John", email: "[email protected]" };
const person2: Person = { name: "Jane", age: 25, email: "[email protected]" };
person1.email = "[email protected]"; // Error: Cannot assign to "email" because it is a read-only property.

類型不能定義可選屬性和只讀屬性。

類型可以定義聯合類型和交叉類型，而接口不能。

類型可以用聯合類型和交叉類型來組合多個類型，例如：

type Person = { name: string } & { age: number };
type Status = "active" | "inactive";
type UserStatus = { status: Status } & Person;
const userStatus: UserStatus = { name: "John", age: 30, status: "active" };

接口可以定義索引簽名，而類型不能。

接口可以定義索引簽名，例如：

interface Dictionary {
? [key: string]: number;
}
const dict: Dictionary = { a: 1, b: 2 };

類型不能定義索引簽名。

結論

• 在對象擴展情況下，interface 使用 extends 關鍵字，而 type 使用交叉類型（&）。
• 同名的 interface 會自動合并，并且在合并時會要求兼容原接口的結構。
• interface 與 type 都可以描述對象類型、函數類型、Class 類型，但 interface 無法像 type 那樣表達元組、一組聯合類型等等。
• interface 無法使用映射類型等類型工具，也就意味著在類型編程場景中我們還是應該使用 type 。

interface 就是描述對象對外暴露的接口，其不應該具有過于復雜的類型邏輯，最多局限于泛型約束與索引類型這個層面。而 type alias 就是用于將一組類型的重命名，或是對類型進行復雜編程。

到此這篇關于TypeScript接口和類型的區別小結的文章就介紹到這了,更多相關TypeScript接口和類型區別內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！