TypeScript接口和類型有哪些區別

今天小編給大家分享的是TypeScript接口和類型有哪些區別，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。

目錄

• 接口（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: '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.

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

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

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

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接口和類型有哪些區別就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。