快捷導(dǎo)航

TypeScript中的interface與type實(shí)戰(zhàn)

更新時(shí)間：2023年06月15日 15:40:00 作者：ShihHsing 創(chuàng)作等級(jí)LV.4

這篇文章主要介紹了TypeScript中的interface與type詳解,它們都是用來(lái)定義類型的強(qiáng)大工具，在實(shí)際開(kāi)發(fā)中，你可以根據(jù)具體情況選擇使用 interface 或 type，或者甚至將它們結(jié)合起來(lái)使用，需要的朋友可以參考下

1. interface 和 type 的定義

首先，我們來(lái)看看 interface 和 type 的定義。在 TypeScript 中，interface 是一種聲明對(duì)象的結(jié)構(gòu)，它描述了對(duì)象應(yīng)該具有的屬性和方法。而 type 是用來(lái)定義自定義類型的關(guān)鍵字，它可以表示任何類型，不僅限于對(duì)象。

我們來(lái)看一個(gè)簡(jiǎn)單的例子：

interface Person {
  name: string;
  age: number;
}
type Point = {
  x: number;
  y: number;
};

在上面的例子中，我們定義了一個(gè) Person 接口和一個(gè) Point 類型。Person 接口要求一個(gè)對(duì)象具有 name 和 age 屬性，而 Point 類型則表示一個(gè)具有 x 和 y 屬性的對(duì)象。

2. interface 和 type 的語(yǔ)法差異

雖然 interface 和 type 有相似的作用，但它們的語(yǔ)法有一些細(xì)微的差異。

interface 語(yǔ)法

interface 的語(yǔ)法比較簡(jiǎn)單，我們只需要使用關(guān)鍵字 interface 加上一個(gè)名稱來(lái)定義它：

interface Person {
  name: string;
  age: number;
}

type 語(yǔ)法

type 的語(yǔ)法稍微有些復(fù)雜一些，我們需要使用關(guān)鍵字 type 并給它一個(gè)名稱：

type Point = {
  x: number;
  y: number;
};

需要注意的是，type 還可以使用 = 來(lái)定義一個(gè)類型別名：

type MyString = string;

上面的代碼定義了一個(gè)類型別名 MyString，它表示一個(gè)字符串類型。

3. interface 和 type 的擴(kuò)展能力

interface 和 type 在擴(kuò)展能力上也有一些差異。我們來(lái)看看它們的不同之處。

interface 的擴(kuò)展

在 interface 中，我們可以使用 extends 關(guān)鍵字來(lái)擴(kuò)展其他接口。這意味著一個(gè)接口可以繼承另一個(gè)接口的屬性和方法。

interface Animal {
  name: string;
  age: number;
}
interface Dog extends Animal {
  breed: string;
}

在上面的例子中，我們定義了一個(gè) Animal 接口和一個(gè) Dog 接口。Dog 接口通過(guò) extends 關(guān)鍵字?jǐn)U展了 Animal 接口，因此它擁有了 Animal 接口中的 name 和 age 屬性，并且還額外定義了一個(gè) breed 屬性。

type 的擴(kuò)展

與 interface 不同，type 使用 & 來(lái)擴(kuò)展

其他類型。這意味著一個(gè)類型可以合并其他類型的屬性。

type Person = {
  name: string;
  age: number;
};
type Employee = {
  company: string;
};
type EmployeePerson = Person & Employee;

在上面的例子中，我們定義了一個(gè) Person 類型和一個(gè) Employee 類型。然后，我們使用 & 將這兩個(gè)類型合并成了一個(gè)新的類型 EmployeePerson。這樣，EmployeePerson 就擁有了 Person 和 Employee 中的所有屬性。

4. interface 和 type 的可選屬性和只讀屬性

在 TypeScript 中，我們經(jīng)常需要定義可選屬性和只讀屬性。那么，interface 和 type 如何處理這些特性呢？讓我們來(lái)看看。

interface 的可選屬性和只讀屬性

在 interface 中，我們可以使用 ? 來(lái)定義可選屬性，使用 readonly 來(lái)定義只讀屬性。

interface Person {
  name: string;
  age?: number; // 可選屬性
  readonly id: number; // 只讀屬性
}

在上面的例子中，age 屬性是可選的，而 id 屬性是只讀的。只讀屬性表示一旦賦值后就不能再被修改。

type 的可選屬性和只讀屬性

在 type 中，我們使用 ? 和 readonly 關(guān)鍵字來(lái)定義可選屬性和只讀屬性。

type Person = {
  name: string;
  age?: number; // 可選屬性
  readonly id: number; // 只讀屬性
};

上面的代碼與 interface 中的定義是等價(jià)的。

5. interface 和 type 的適用場(chǎng)景

到目前為止，我們已經(jīng)了解了 interface 和 type 的基本概念和語(yǔ)法。接下來(lái)，我們將討論它們?cè)诓煌瑘?chǎng)景下的應(yīng)用。

interface 的適用場(chǎng)景

interface 適用于描述對(duì)象的結(jié)構(gòu)和行為。如果你需要定義一個(gè)對(duì)象的屬性和方法，并且希望其他對(duì)象可以通過(guò)繼承來(lái)共享這些屬性和方法，那么 interface 是一個(gè)不錯(cuò)的選擇。

interface Shape {
  name: string;
  area(): number;
}

上面的例子中，我們定義了一個(gè) Shape 接口，它包含了一個(gè) name 屬性和一個(gè)計(jì)算面積的 area 方法。如果有多個(gè)形狀，比如 Circle 和 Rectangle，都需要具有這些屬性和方法，那么它們可以分別實(shí)現(xiàn) Shape 接口。

type 的適用場(chǎng)景

type 則適用于定義自定義類型。當(dāng)你需要?jiǎng)?chuàng)建一個(gè)具有特定結(jié)構(gòu)的類型，而不僅僅是對(duì)象時(shí)，type 是一個(gè)更好的選擇。

type MyString = string;

上面的例子中，我們創(chuàng)建了一個(gè)類型別名 MyString，它表示一個(gè)字符串類型。這樣，在代碼中可以直接使用 MyString 來(lái)表示字符串類型。

6. interface 和 type 的相互轉(zhuǎn)換

有時(shí)候，我們可能需要將 interface 轉(zhuǎn)換為 type，或者將 type 轉(zhuǎn)換為 interface。在 TypeScript 中，這是可以實(shí)

現(xiàn)的。

interface 轉(zhuǎn)換為 type

要將 interface 轉(zhuǎn)換為 type，我們可以使用 type 關(guān)鍵字和 typeof 運(yùn)算符。

interface Person {
  name: string;
  age: number;
}
type PersonType = typeof Person;

在上面的例子中，我們使用 typeof 運(yùn)算符將 Person 接口轉(zhuǎn)換為對(duì)應(yīng)的類型 PersonType。這樣，PersonType 將擁有 Person 接口中定義的所有屬性和方法。

type 轉(zhuǎn)換為 interface

要將 type 轉(zhuǎn)換為 interface，我們可以使用 interface 關(guān)鍵字并重新定義類型的結(jié)構(gòu)。

type Point = {
  x: number;
  y: number;
};
interface PointInterface extends Point {}

在上面的例子中，我們使用 interface 關(guān)鍵字將 Point 類型轉(zhuǎn)換為對(duì)應(yīng)的接口 PointInterface。這樣，PointInterface 將具有 Point 類型中定義的屬性。

結(jié)論

到這里，我們對(duì)于 TypeScript 中的 interface 和 type 已經(jīng)有了深入的了解。雖然它們?cè)谀承┓矫嬗幸恍┎町悾鼈兌际怯脕?lái)定義類型的強(qiáng)大工具。在實(shí)際開(kāi)發(fā)中，你可以根據(jù)具體情況選擇使用 interface 或 type，或者甚至將它們結(jié)合起來(lái)使用。