TypeScript 中的接口（Interfaces）用于定義對(duì)象的結(jié)構(gòu)。它們?cè)试S開發(fā)者指定一個(gè)對(duì)象應(yīng)具有哪些屬性以及這些屬性的類型。接口有助于確保對(duì)象遵循特定的結(jié)構(gòu)，從而在整個(gè)應(yīng)用中提供一致性，并提升代碼的可維護(hù)性。

一、認(rèn)識(shí)接口

TypeScript 是 JavaScript 的一個(gè)靜態(tài)類型超集，它添加了可選的類型、類、接口以及其他功能，幫助開發(fā)者構(gòu)建健壯且易于維護(hù)的應(yīng)用程序。TypeScript 最強(qiáng)大的特性之一就是接口（interfaces），它允許你定義對(duì)象的結(jié)構(gòu)，強(qiáng)制保持一致性，并提升代碼的可讀性。

(一) 什么是接口

在 TypeScript 中，接口是一種“契約”，用于定義對(duì)象的結(jié)構(gòu)。它指定了一個(gè)對(duì)象必須具備的屬性和方法，但不提供具體的實(shí)現(xiàn)。接口僅用于類型檢查，在編譯過程中會(huì)被移除。

使用接口有很多好處：

• 定義對(duì)象結(jié)構(gòu)：確保對(duì)象具有特定的屬性和方法。
• 提高代碼可讀性：清晰地展示對(duì)象應(yīng)包含哪些屬性和方法。
• 強(qiáng)制一致性：通過確保對(duì)象遵循特定結(jié)構(gòu)來(lái)防止錯(cuò)誤發(fā)生。

以下是一個(gè)在 TypeScript 中使用接口的簡(jiǎn)單示例：

interface Car {make: string;model: string;year: number;
}
const myCar: Car = {make: "Toyota",model: "Corolla",year: 2022
};
console.log(myCar);

Car 接口：定義了 car 對(duì)象的結(jié)構(gòu)，其中 make、model 和 year 是必需的屬性。

myCar 對(duì)象：一個(gè)符合 Car 接口結(jié)構(gòu)的對(duì)象，包含指定的屬性。

輸出：

{ make: 'Toyota', model: 'Corolla', year: 2022 }

(二) 場(chǎng)景示例

1. 類中的接口

// 定義一個(gè) Employee 接口，包含姓名、年齡和職位屬性
interface Employee {name: string;age: number;position: string;
}// Manager 類實(shí)現(xiàn)了 Employee 接口，必須包含接口中定義的所有屬性
class Manager implements Employee {name: string;age: number;position: string;// 構(gòu)造函數(shù)用于初始化 name、age 和 positionconstructor(name: string, age: number, position: string) {this.name = name;this.age = age;this.position = position;}
}// 創(chuàng)建一個(gè) Manager 類的實(shí)例
const manager1 = new Manager("John Doe", 35, "Project Manager");// 輸出 manager1 對(duì)象
console.log(manager1);

• Employee 接口定義了一個(gè)員工的結(jié)構(gòu)，要求包含 name、age 和 position 屬性。
• Manager 類實(shí)現(xiàn)了 Employee 接口，確保它具有這些必需的屬性。

輸出：

Manager { name: 'John Doe', age: 35, position: 'Project Manager' }

2. 對(duì)象的接口定義

// 定義 Product 接口，包含 id、name 和 price 屬性
interface Product {id: number;name: string;price: number;
}// 創(chuàng)建一個(gè)符合 Product 接口的對(duì)象 product
const product: Product = {id: 1,name: "Laptop",price: 1200
};// 輸出 product 對(duì)象
console.log(product);

• Product 接口規(guī)定了一個(gè)產(chǎn)品對(duì)象必須包含 id（數(shù)字）、name（字符串）和 price（數(shù)字）屬性。
• product 對(duì)象符合 Product 接口，包含了所有必需的屬性。

輸出：

{ id: 1, name: 'Laptop', price: 1200 }

3. 帶有方法簽名的接口

// 定義 Calculator 接口，包含兩個(gè)方法的簽名：add 和 subtract，均接收兩個(gè)數(shù)字參數(shù)，返回?cái)?shù)字
interface Calculator {add(a: number, b: number): number;subtract(a: number, b: number): number;
}// SimpleCalculator 類實(shí)現(xiàn) Calculator 接口，提供 add 和 subtract 方法的具體實(shí)現(xiàn)
class SimpleCalculator implements Calculator {add(a: number, b: number): number {return a + b;}subtract(a: number, b: number): number {return a - b;}
}// 創(chuàng)建 SimpleCalculator 實(shí)例
const calc = new SimpleCalculator();// 調(diào)用 add 方法，輸出結(jié)果 8
console.log(calc.add(5, 3));// 調(diào)用 subtract 方法，輸出結(jié)果 5
console.log(calc.subtract(9, 4));

• Calculator 接口定義了兩個(gè)方法：add 和 subtract，二者都接受兩個(gè)數(shù)字參數(shù)并返回一個(gè)數(shù)字。
• SimpleCalculator 類實(shí)現(xiàn)了 Calculator 接口，為 add 和 subtract 方法提供了具體的邏輯實(shí)現(xiàn)。

8
5

(三) 使用接口的最佳實(shí)踐

• 使用接口定義對(duì)象結(jié)構(gòu)：始終使用接口來(lái)定義代碼中復(fù)雜對(duì)象或數(shù)據(jù)模型的結(jié)構(gòu)。
• 使用可選屬性：如果某些屬性可能不總是存在，可以將它們?cè)O(shè)為可選，以提高代碼的靈活性。
• 接口繼承：利用接口繼承，從簡(jiǎn)單接口構(gòu)建更復(fù)雜的結(jié)構(gòu)。
• 使用接口定義函數(shù)簽名：在定義復(fù)雜函數(shù)時(shí)，接口能幫助明確函數(shù)簽名，使代碼更易維護(hù)。

二、interface 和 type 的區(qū)別

在 TypeScript 中，interface 和 type 都用于定義對(duì)象的結(jié)構(gòu)，但它們?cè)陟`活性和使用上有所不同。interface 是可擴(kuò)展的，主要用于描述對(duì)象的形狀；而 type 更加多樣化，支持聯(lián)合類型、交叉類型以及更復(fù)雜的類型定義。

(一) TypeScript 中的類型

TypeScript 的類型系統(tǒng)描述了語(yǔ)言支持的各種數(shù)據(jù)類型。它主要分為三大類：任意類型（Any Type）、內(nèi)置類型（Built-In Type）和用戶自定義類型（User-Defined Type）。TypeScript 的類型系統(tǒng)負(fù)責(zé)在程序運(yùn)行前確保數(shù)據(jù)類型的正確性。

在這個(gè)示例中，我們定義了兩個(gè) TypeScript 類型 —— People 和 MorePeople，并使用交叉類型操作符 & 將它們組合起來(lái)。常量 people 同時(shí)實(shí)現(xiàn)了這兩種類型，存儲(chǔ)并輸出了這個(gè)組合后的對(duì)象。

// 定義類型 People，包含 name 和 age 屬性
type People = {name: string;age: number;
};// 定義類型 MorePeople，包含 email 屬性
type MorePeople = {email: string;
};// 使用交叉類型將 People 和 MorePeople 組合成 CombinedPeople 類型
type CombinedPeople = People & MorePeople;// 創(chuàng)建符合 CombinedPeople 類型的對(duì)象 people，包含 name、age 和 email 屬性
const people: CombinedPeople = {name: "FelixLu",age: 20,email: "FelixLu@gmail.com"
};// 輸出 people 對(duì)象
console.log(people);

輸出：

{ name: 'FelixLu', age: 20, email: 'FelixLu@gmail.com' }

(二) TypeScript 中的接口

接口（Interface）是 TypeScript 中一種語(yǔ)法上的“契約”，實(shí)體必須遵守該契約。接口只能聲明屬性、方法和事件，而不包含任何具體實(shí)現(xiàn)。接口定義了實(shí)現(xiàn)類必須遵循的標(biāo)準(zhǔn)結(jié)構(gòu)。

本例展示了 TypeScript 中接口的合并（Interface Merging）特性。兩個(gè)同名的 People 接口會(huì)自動(dòng)合并，允許對(duì)象 people 實(shí)現(xiàn)所有屬性（name、age、email），并輸出合并后的結(jié)果。

// 創(chuàng)建接口 People，包含 name 和 age 屬性
interface People {name: string;age: number
}// 重新聲明同名接口 People，包含 email 屬性，接口會(huì)自動(dòng)合并
interface People {email: string;
}// 創(chuàng)建符合合并后接口 People 的對(duì)象 people，包含 name、age 和 email 屬性
const people: People = {name: "FelixLu",age: 20,email: "FelixLu@gmail.com"
};// 輸出 people 對(duì)象
console.log(people);

輸出：

{ name: 'FelixLu', age: 20, email: 'FelixLu@gmail.com' }

(三) TypeScript 中 Type 和 Interface 的區(qū)別

特性	Type	Interface
定義	一組數(shù)據(jù)類型	一種語(yǔ)法契約
靈活性	更靈活	相較于 Type 靈活性較低
關(guān)鍵字	使用 type 關(guān)鍵字	使用 interface 關(guān)鍵字
命名	支持為類型創(chuàng)建新的名稱	用于定義實(shí)體
能力	能力較少	能力更強(qiáng)
對(duì)象使用	本身不直接支持對(duì)象的使用	支持對(duì)象的使用
聲明合并	不支持多重聲明合并	支持多重聲明合并
名稱沖突	同名的兩個(gè)類型會(huì)報(bào)異常	同名的兩個(gè)接口會(huì)被合并
實(shí)現(xiàn)	不用于實(shí)現(xiàn)目標(biāo)	用于類的實(shí)現(xiàn)和繼承
聯(lián)合類型	不支持實(shí)現(xiàn)或繼承聯(lián)合類型	支持實(shí)現(xiàn)和繼承聯(lián)合類型
交叉類型	可以通過組合多個(gè)類型創(chuàng)建交叉類型	不支持創(chuàng)建交叉接口
原始類型、聯(lián)合類型和元組的使用	可用于原始類型、聯(lián)合類型和元組	不支持其他類型的聲明

雖然 TypeScript 的 type 和 interface 在某些特性上有所不同，但它們?cè)诤芏喾矫媸窍嗨频?#xff0c;且彼此并不能完全取代。開發(fā)者可以根據(jù)項(xiàng)目的具體需求選擇使用哪一種。type 和 interface 各自的靈活性和特定使用場(chǎng)景，使它們成為 TypeScript 開發(fā)中非常有價(jià)值的工具。

三、接口與類

在 TypeScript 中，接口定義了類必須遵守的結(jié)構(gòu)，確保對(duì)象形狀的一致性并促進(jìn)類型檢查。

• 接口聲明屬性和方法，但不包含具體實(shí)現(xiàn)，作為類必須實(shí)現(xiàn)的契約。
• 類通過 implements 關(guān)鍵字實(shí)現(xiàn)接口，并為接口中聲明的成員提供具體實(shí)現(xiàn)。

以下是相關(guān)的方法：

(一) 類實(shí)現(xiàn)接口

在 TypeScript 中，類可以實(shí)現(xiàn)接口，以確保它遵守接口定義的特定結(jié)構(gòu)。

語(yǔ)法：

class ClassName implements InterfaceName {// 類的屬性和方法
}

一個(gè)例子：

// 定義接口 Shape，聲明一個(gè)方法 calculateArea，返回?cái)?shù)字類型
interface Shape {calculateArea(): number;
}// Rectangle 類實(shí)現(xiàn) Shape 接口
class Rectangle implements Shape {width: number;height: number;constructor(width: number, height: number) {this.width = width;this.height = height;}// 實(shí)現(xiàn)接口中的 calculateArea 方法，計(jì)算矩形面積calculateArea(): number {return this.width * this.height;}
}// 創(chuàng)建 Rectangle 實(shí)例，并調(diào)用 calculateArea 方法
const rect = new Rectangle(5, 10);
console.log(rect.calculateArea());

• Shape 接口定義了一個(gè)包含 calculateArea 方法的契約。
• Rectangle 類實(shí)現(xiàn)了 Shape 接口，為 calculateArea 方法提供了具體實(shí)現(xiàn)。
• 創(chuàng)建了一個(gè)寬為 5、高為 10 的 Rectangle 實(shí)例，并調(diào)用 calculateArea 方法計(jì)算面積。

輸出：

50

(二) 類實(shí)現(xiàn)多個(gè)接口

在 TypeScript 中，類可以實(shí)現(xiàn)多個(gè)接口，從而遵守多個(gè)契約，并確保為所有指定的成員提供實(shí)現(xiàn)。

語(yǔ)法：

class ClassName implements Interface1, Interface2 {// 類的屬性和方法
}

一個(gè)例子：

// 定義接口 Shape，聲明方法 calculateArea，返回?cái)?shù)字類型
interface Shape {calculateArea(): number;
}// 定義接口 Color，聲明屬性 color，類型為字符串
interface Color {color: string;
}// Circle 類同時(shí)實(shí)現(xiàn) Shape 和 Color 兩個(gè)接口
class Circle implements Shape, Color {radius: number;color: string;constructor(radius: number, color: string) {this.radius = radius;this.color = color;}// 實(shí)現(xiàn)接口 Shape 中的 calculateArea 方法，計(jì)算圓的面積calculateArea(): number {return Math.PI * this.radius * this.radius;}
}// 創(chuàng)建 Circle 實(shí)例，半徑為 5，顏色為紅色
const circle = new Circle(5, 'red');
console.log(`顏色: ${circle.color}`);
console.log(`面積: ${circle.calculateArea()}`);

• Shape 接口聲明了一個(gè) calculateArea 方法，定義了計(jì)算圖形面積的契約。
• Color 接口包含一個(gè) color 屬性，規(guī)定實(shí)現(xiàn)該接口的類必須具有顏色屬性。
• Circle 類同時(shí)實(shí)現(xiàn)了 Shape 和 Color 接口，為 calculateArea 方法和 color 屬性提供了具體實(shí)現(xiàn)。

輸出：

顏色: red
面積: 78.53981633974483

四、創(chuàng)建帶條件類型的接口

TypeScript 中的條件類型使開發(fā)者能夠創(chuàng)建根據(jù)所遇類型自動(dòng)調(diào)整行為的接口。該特性提升了代碼的靈活性和適應(yīng)性，尤其適用于類型可能變化的場(chǎng)景。

通過使用條件類型，開發(fā)者可以定義動(dòng)態(tài)調(diào)整結(jié)構(gòu)和約束的接口，為構(gòu)建健壯且類型安全的應(yīng)用提供強(qiáng)大工具。

(一) 使用 extends 關(guān)鍵字

這種方法通過使用條件類型來(lái)區(qū)分不同的類型，并根據(jù)條件有選擇地?cái)U(kuò)展接口的屬性。

語(yǔ)法：

interface InterfaceName<T> {propertyName: T extends ConditionType ? TypeIfTrue : TypeIfFalse;
}

下面的代碼使用 extends 關(guān)鍵字和三元運(yùn)算符創(chuàng)建了一個(gè)帶條件類型的接口。

// 定義帶有條件類型的接口 Vehicle，泛型參數(shù) T
interface Vehicle<T> {// 如果 T 是 'car'，則 type 屬性為 'four-wheeler'，否則為 'two-wheeler'type: T extends 'car' ? 'four-wheeler' : 'two-wheeler';// 如果 T 是 'car'，則 wheels 屬性為 4，否則為 2wheels: T extends 'car' ? 4 : 2;
}// 創(chuàng)建類型為 Vehicle<'car'> 的對(duì)象 car
const car: Vehicle<'car'> = {type: 'four-wheeler',wheels: 4
};// 創(chuàng)建類型為 Vehicle<'bike'> 的對(duì)象 bike
const bike: Vehicle<'bike'> = {type: 'two-wheeler',wheels: 2
};console.log(car);
console.log(bike);

輸出：

{ type: 'four-wheeler', wheels: 4 }
{ type: 'two-wheeler', wheels: 2 }

(二) 映射類型

映射類型結(jié)合條件約束，能夠根據(jù)特定條件將已有類型轉(zhuǎn)換成新的接口。

語(yǔ)法：

type MappedTypeName<T> = {[P in T]: T extends ConditionType ? TypeIfTrue : TypeIfFalse;
};

下面的代碼使用映射類型實(shí)現(xiàn)了帶條件類型的接口。

// 定義聯(lián)合類型 Fruit，包含 'apple' 和 'banana'
type Fruit = 'apple' | 'banana';// 定義映射類型 FruitProperties，泛型參數(shù) T 是字符串?dāng)?shù)組
// 遍歷數(shù)組中的每個(gè)元素 P，若 P 是 'apple'，屬性類型為 { color: string }
// 否則屬性類型為 { length: number }
type FruitProperties<T extends string[]> = {[P in T[number]]: P extends 'apple' ? { color: string } : { length: number };
};// FruitInfo 接口繼承自 FruitProperties，傳入 Fruit 數(shù)組類型
interface FruitInfo extends FruitProperties<Fruit[]> {}// 創(chuàng)建 FruitInfo 類型的 appleInfo 對(duì)象，包含 apple 屬性
const appleInfo: FruitInfo = {apple: { color: 'red' }
} as FruitInfo;// 創(chuàng)建 FruitInfo 類型的 bananaInfo 對(duì)象，包含 banana 屬性
const bananaInfo: FruitInfo = {banana: { length: 10 }
} as FruitInfo;console.log(appleInfo);
console.log(bananaInfo);

輸出：

{ apple: { color: red } } 
{ banana: { length: 10 } } 

(三) 條件類型和聯(lián)合類型

在這種方法中，我們結(jié)合聯(lián)合類型和條件類型，定義能夠根據(jù)不同類型動(dòng)態(tài)調(diào)整的接口。

type ConditionalInterface<T> = T extends ConditionType1 ? InterfaceType1 :T extends ConditionType2 ? InterfaceType2 :DefaultInterfaceType;

下面的代碼演示了如何結(jié)合條件類型和聯(lián)合類型，動(dòng)態(tài)定義接口。

type Fruit = 'apple' | 'banana';// 定義條件類型 FruitProperties：根據(jù)不同的 T 類型返回不同的屬性結(jié)構(gòu)
type FruitProperties<T> = T extends 'apple' ? { color: string } :T extends 'banana' ? { length: number } :never;// 創(chuàng)建 appleProperties，類型為 FruitProperties<'apple'>，要求包含 color 屬性
const appleProperties: FruitProperties<'apple'> = { color: 'red' };// 創(chuàng)建 bananaProperties，類型為 FruitProperties<'banana'>，要求包含 length 屬性
const bananaProperties: FruitProperties<'banana'> = { length: 10 };console.log(appleProperties); 
console.log(bananaProperties);

輸出：

{ color: 'red' }
{ length: 10 }

五、混合類型

在 TypeScript 中，混合類型（Hybrid Types）指的是將不同類型特性組合在一起的類型，例如對(duì)象、函數(shù)、數(shù)組等的結(jié)合體。混合類型可以讓一個(gè)值既像函數(shù)一樣被調(diào)用，又像對(duì)象一樣擁有屬性和方法。

在 TypeScript 中，我們可以使用接口（interface）或類型別名（type alias）來(lái)定義混合類型（Hybrid Types）。這些聲明可以包括：

• 屬性簽名（Property Signatures）：聲明對(duì)象類型的屬性；
• 調(diào)用簽名（Call Signatures）：聲明該對(duì)象可以像函數(shù)一樣被調(diào)用；
• 索引簽名（Index Signatures）：允許對(duì)象通過鍵訪問其成員。

混合類型通常是以下不同類型元素的組合，包括：

• 可調(diào)用屬性（Callable properties）：該對(duì)象可以作為函數(shù)被調(diào)用；
• 屬性（Properties）：該對(duì)象像普通對(duì)象一樣擁有屬性。

這使得我們可以定義出功能靈活、可配置的對(duì)象類型，既可以調(diào)用也可以持有狀態(tài)和方法。

(一) 場(chǎng)景示例

1. 對(duì)象-函數(shù)混合類型

在下面的示例中，Logger 接口引入了兩種函數(shù)類型的混合：一種是接收消息作為參數(shù)的函數(shù)，另一種是不接收參數(shù)的函數(shù)。此外，它還暴露了一個(gè)名為 level 的屬性和一個(gè)名為 setLevel 的方法。

interface Logger {(message: string): void; // 可調(diào)用簽名：接受一個(gè)字符串消息作為參數(shù)level: string; // 屬性：日志級(jí)別setLevel(newLevel: string): void; // 方法：設(shè)置日志級(jí)別
}function createLogger(): Logger {let logger = function (message: string) {console.log(`[${logger.level}] ${message}`);} as Logger;logger.level = "info"; // 默認(rèn)級(jí)別為 infologger.setLevel = function (newLevel: string) {logger.level = newLevel; // 設(shè)置新的日志級(jí)別};return logger;
}const myLogger = createLogger();
myLogger("啟動(dòng)應(yīng)用程序。");
myLogger.setLevel("debug");
myLogger("調(diào)試應(yīng)用程序。");

輸出：

[info] 啟動(dòng)應(yīng)用程序。
[debug] 調(diào)試應(yīng)用程序。

2. 數(shù)組-對(duì)象混合類型

在這個(gè)例子中，StringArray 接口既是一種數(shù)組，也是一種對(duì)象。這意味著它允許使用數(shù)字進(jìn)行索引，并具有像 length 和 description 這樣的附加屬性。

interface StringArray {[index: number]: string; // 使用數(shù)字索引，返回字符串length: number;          // 表示數(shù)組的長(zhǎng)度description: string;     // 描述信息
}let myStringArray: StringArray = {0: "hello",1: "world",length: 2,description: "這個(gè)數(shù)組包含字符串。" // 中文翻譯
};console.log(myStringArray[0]);           
console.log(myStringArray.description); 

輸出：

hello
這個(gè)數(shù)組包含字符串。

(二) 使用場(chǎng)景和優(yōu)點(diǎn)

1. 混合類型的使用場(chǎng)景

• 庫(kù) API：庫(kù)應(yīng)使用混合類型來(lái)創(chuàng)建靈活且健壯的 API；例如，jQuery 對(duì)象既可以作為函數(shù)調(diào)用，也有方法和屬性。
• 事件觸發(fā)器：它可能包含用于觸發(fā)事件的函數(shù)，以及添加或移除監(jiān)聽器的方法。
• 配置對(duì)象：配置對(duì)象可以是可調(diào)用的（即觸發(fā)某些操作），同時(shí)也包含配置屬性。
• 復(fù)雜數(shù)據(jù)結(jié)構(gòu)：混合類型非常適合需要支持類似對(duì)象的動(dòng)態(tài)鍵和類似數(shù)組的數(shù)字索引的復(fù)雜數(shù)據(jù)結(jié)構(gòu)。

2. 混合類型的優(yōu)點(diǎn)

• 靈活性：允許一個(gè)類型扮演多種角色，從而簡(jiǎn)化了適應(yīng)性強(qiáng)的 API 的創(chuàng)建。
• 類型安全：TypeScript 的類型檢查可以在編譯時(shí)捕獲混合類型的錯(cuò)誤。