TypeScript - 通用介面

你好，未來的編程超級巨星！今天，我們將踏上一段令人興奮的旅程，探索 TypeScript 世界的其中一個最強大的功能：通用介面。別擔心你對編程還是新手——我會成為你的友好導遊，我們會一步一步地學習。到了這堂課的結尾，你將會對你所學到的知識感到驚奇！

TypeScript - Generic Interfaces

什麼是通用介面？

在我們深入通用介面之前，讓我們快速回顧一下 TypeScript 中的介面是什麼。介面就像是一份契約，定義了對象的結構。它告訴我們一個對象應該有哪些屬性和方法。

現在，想像一下如果我們能夠使這些介面更具靈活性，能夠與不同類型的數據一起工作。這就是通用介面的用處！它們允許我們創建有機能夠適應各種數據類型的介面，使我們的代碼更加可重用和靈活。

基本通用介面

讓我們從一個簡單的例子開始：

interface Box<T> {
contents: T;
}

let numberBox: Box<number> = { contents: 42 };
let stringBox: Box<string> = { contents: "Hello, TypeScript!" };

在這個例子中，Box 是一個通用介面。<T> 像是一個佔位符，我們稍後將指定類型。我們可以使用這個介面來創建有機能夠持有不同類型項目的盒子：

numberBox 是一個 Box，它持有數字。
stringBox 是一個 Box，它持有字符串。

這不是很酷嗎？這就像擁有一個神奇的盒子，能夠適應持有我們放入的任何東西！

多個類型參數

通用介面可以有多個類型參數。讓我們看一個例子：

interface Pair<T, U> {
first: T;
second: U;
}

let pair1: Pair<number, string> = { first: 1, second: "one" };
let pair2: Pair<boolean, Date> = { first: true, second: new Date() };

在這裡，Pair 是一個具有兩個類型參數 T 和 U 的通用介面。這讓我們能夠創建項目對，每個項目可以是不同的類型。這就像創建任何兩種類型我們想要的動態二人組！

帶有方法的通用介面

介面也可以包括方法，這些方法可以使用通用類型。讓我們看一個例子：

interface Reversible<T> {
data: T[];
reverse(): T[];
}

class NumberArray implements Reversible<number> {
constructor(public data: number[]) {}

reverse(): number[] {
return this.data.slice().reverse();
}
}

let numbers = new NumberArray([1, 2, 3, 4, 5]);
console.log(numbers.reverse()); // 輸出: [5, 4, 3, 2, 1]

在這個例子中，Reversible 是一個通用介面，其中包括一個方法 reverse()。NumberArray 類實現了這個介面對數字。這種方法的優點在於我們可以很容易為字符串、對象或任何其他類型創建類似類！

通用介面作為函數類型

現在，讓我們探索如何使用通用介面來描述函數類型。這裡的事情會變得非常有趣！

interface Transformer<T, U> {
(input: T): U;
}

let stringToNumber: Transformer<string, number> = (input) => parseInt(input);

console.log(stringToNumber("42")); // 輸出: 42

在這個例子中，Transformer 是一個描述函數的通用介面。它接受類型為 T 的輸入並返回類型為 U 的值。然後我們創建一個函數 stringToNumber，它使用這個介面將字符串轉換為數字。

真實世界範例：數據處理器

讓我們看一個你可能會在真實世界編程中遇到的更複雜的例子：

interface DataProcessor<T, U> {
processItem(item: T): U;
processArray(items: T[]): U[];
}

class StringToNumberProcessor implements DataProcessor<string, number> {
processItem(item: string): number {
return parseInt(item);
}

processArray(items: string[]): number[] {
return items.map(item => this.processItem(item));
}
}

let processor = new StringToNumberProcessor();
console.log(processor.processItem("42"));          // 輸出: 42
console.log(processor.processArray(["1", "2", "3"])); // 輸出: [1, 2, 3]

在這個例子中，我們定義了一個 DataProcessor 介面，它可以處理單個項目或項目數組。StringToNumberProcessor 類實現了這個介面來將字符串轉換為數字。這種模式在需要以各種方式處理數據時保持類型安全性非常有用。

結論

恭喜你！你剛剛在 TypeScript 旅程中邁出了重要的一步，學習了通用介面。這些強大的工具讓我們能夠編寫靈活、可重用的代碼，能夠與不同類型的數據一起工作。記住，熟能生巧，所以不要害怕在您的專案中嘗試這些概念。

這裡是我們所涵蓋方法的快速參考表：

方法	描述
`interface Box<T>`	創建有機能夠持有任何類型的盒子的通用介面
`interface Pair<T, U>`	創建有機能夠持有不同類型項目的對的通用介面
`interface Reversible<T>`	創建有機能夠包含反轉數組方法的通用介面
`interface Transformer<T, U>`	創建有機能夠描述從一種類型轉換為另一種類型的函數的通用介面
`interface DataProcessor<T, U>`	創建有機能夠處理單個項目或項目數組的通用介面

持續編碼，持續學習，記住——在 TypeScript 的世界中，泛型是你的超能力！?‍♀️?‍♂️

Credits: Image by storyset