掌握 TypeScript 泛型：增強程式碼可重複使用性和類型安全性

TypeScript 徹底改變了我們編寫 JavaScript 的方式，為我們的開發過程帶來了靜態類型和增強的工具。它最強大的功能之一是泛型，它允許我們創建適用於各種類型的可重複使用元件。在這篇文章中，我們將深入研究 TypeScript 泛型，探索它們如何提高程式碼的靈活性和類型安全性。

了解泛型

泛型提供了一種建立可以在多種類型而不是單一類型上工作的元件的方法。當您想要建立一個可以處理不同資料類型而不犧牲類型資訊的元件時，它們特別有用。

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

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");
console.log(output);  // Output: myString

在此範例中，T 是一個類型變量，用於捕獲使用者提供的類型。這允許我們稍後使用該類型資訊。

函數中的泛型

泛型通常在函數中使用來建立靈活、可重複使用的程式碼。這是一個更實際的例子：

function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}

let numbers = [1, 2, 3, 4, 5];
let strings = ["a", "b", "c"];

console.log(firstElement(numbers));  // Output: 1
console.log(firstElement(strings));  // Output: "a"

此函數適用於任何類型的數組，傳回該類型的第一個元素，如果數組為空，則傳回未定義的元素。

介面中的泛型

泛型也可以在介面中使用來建立靈活的資料結構：

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

let pair: KeyValuePair<string, number> = { key: "age", value: 30 };

類別中的泛型

類別也可以利用泛型來建立可重複使用的元件：

class Queue<T> {
    private data: T[] = [];

    push(item: T) {
        this.data.push(item);
    }

    pop(): T | undefined {
        return this.data.shift();
    }
}

let numberQueue = new Queue<number>();
numberQueue.push(10);
numberQueue.push(20);
console.log(numberQueue.pop());  // Output: 10

這個 Queue 類別可以處理任何類型的數據，在整個使用過程中提供類型安全。

通用約束

有時，我們想要限制泛型可以使用的型別。我們可以在有約束的情況下做到這一點：

interface Lengthwise {
    length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
    console.log(arg.length);
}

logLength("Hello");  // Works
logLength([1, 2, 3]);  // Works
logLength(3);  // Error: Number doesn't have a length property

在此範例中，我們將 T 限制為具有長度屬性的類型。

結論

泛型是 TypeScript 中的一項強大功能，可實現更好的程式碼重複使用和型別安全。透過掌握泛型，您可以編寫更靈活、更健壯、適用於各種類型的程式碼。當您繼續使用 TypeScript 進行開發時，請尋找使用泛型的機會來提高程式碼的靈活性和可維護性。

記住，掌握泛型的關鍵是練習。嘗試重構一些現有程式碼以使用泛型，您很快就會看到程式碼可重用性和類型安全性方面的好處。

更多 Typescript 教學

以上是掌握 TypeScript 泛型：增強程式碼可重複使用性和類型安全性的詳細內容。更多資訊請關注PHP中文網其他相關文章！