目錄

• 接口（interface）
• 類(lèi)型（type）
• interface vs type
• 結(jié)論

TypeScript 是由 Microsoft 開(kāi)發(fā)的一種開(kāi)源的編程語(yǔ)言。它是 JavaScript 的超集，添加了靜態(tài)類(lèi)型和其他功能，使代碼更為健壯且易于維護(hù)。在 TypeScript 中，有兩種主要的定義自定義類(lèi)型的方式：接口和類(lèi)型。盡管它們?cè)谕庥^上可能相似，但它們之間有一些關(guān)鍵的區(qū)別。在本文中，我們將討論 TypeScript 中接口和類(lèi)型之間的區(qū)別并給出具體代碼示例。

接口（interface）

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

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.

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

類(lèi)型（type）

type 是一種定義簡(jiǎn)單類(lèi)型的方式，它可以用來(lái)定義基本類(lèi)型、聯(lián)合類(lèi)型、交叉類(lèi)型、字面量類(lèi)型等。type 可以給一個(gè)類(lèi)型起一個(gè)別名，以便重復(fù)使用。例如：

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

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

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

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

上面的代碼分別使用 interface 和 type 定義了一個(gè)加法函數(shù)類(lèi)型 Sum 和一個(gè)乘法函數(shù)類(lèi)型 Multiply，它們都接受兩個(gè)參數(shù)并返回它們的運(yùn)算結(jié)果。

interface vs type

接口可以被繼承，而類(lèi)型不能。

接口可以通過(guò) extends 關(guān)鍵字來(lái)擴(kuò)展基礎(chǔ)接口，例如：

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

類(lèi)型不能被繼承。

類(lèi)型只能定義一次，而接口可以定義多次并且會(huì)自動(dòng)合并。

類(lèi)型可以定義一次，例如：

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

如果試圖再次定義同名類(lèi)型，則會(huì)報(bào)錯(cuò)。
接口可以定義多次，并且會(huì)自動(dòng)合并同名屬性，例如：

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

接口可以定義可選屬性和只讀屬性，而類(lèi)型不能。

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

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.

類(lèi)型不能定義可選屬性和只讀屬性。

類(lèi)型可以定義聯(lián)合類(lèi)型和交叉類(lèi)型，而接口不能。

類(lèi)型可以用聯(lián)合類(lèi)型和交叉類(lèi)型來(lái)組合多個(gè)類(lèi)型，例如：

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

接口可以定義索引簽名，而類(lèi)型不能。

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

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

類(lèi)型不能定義索引簽名。

結(jié)論

• 在對(duì)象擴(kuò)展情況下，interface 使用 extends 關(guān)鍵字，而 type 使用交叉類(lèi)型（&）。
• 同名的 interface 會(huì)自動(dòng)合并，并且在合并時(shí)會(huì)要求兼容原接口的結(jié)構(gòu)。
• interface 與 type 都可以描述對(duì)象類(lèi)型、函數(shù)類(lèi)型、Class 類(lèi)型，但 interface 無(wú)法像 type 那樣表達(dá)元組、一組聯(lián)合類(lèi)型等等。
• interface 無(wú)法使用映射類(lèi)型等類(lèi)型工具，也就意味著在類(lèi)型編程場(chǎng)景中我們還是應(yīng)該使用 type 。

interface 就是描述對(duì)象對(duì)外暴露的接口，其不應(yīng)該具有過(guò)于復(fù)雜的類(lèi)型邏輯，最多局限于泛型約束與索引類(lèi)型這個(gè)層面。而 type alias 就是用于將一組類(lèi)型的重命名，或是對(duì)類(lèi)型進(jìn)行復(fù)雜編程。

到此這篇關(guān)于TypeScript接口和類(lèi)型的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)TypeScript接口和類(lèi)型區(qū)別內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！