目錄

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

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

接口（interface）

interface 是一種定義復(fù)雜類型的方式，它可以用來描述對象類型、函數(shù)類型、類類型、數(shù)組類型、字面量類型等。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 類，它實現(xiàn)了 Person 接口，因此必須實現(xiàn) name、age 和 sayHello。在 sayHello 方法中，我們使用模板字符串輸出學(xué)生的姓名和年齡。

類型（type）

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

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 定義函數(shù)的參數(shù)類型和返回值類型，也可以使用 type 定義同樣的類型，例如：

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

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

interface vs type

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

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

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: "john@example.com" };
const person2: Person = { name: "Jane", age: 25, email: "jane@example.com" };
person1.email = "jane@example.com"; // Error: Cannot assign to "email" because it is a read-only property.

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

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

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

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 };

類型不能定義索引簽名。

結(jié)論

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

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

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