TypeScript - 泛型類

泛型類

TypeScript 泛型類允許你建立一個可以處理多種資料型別而不是單一資料型別的類。它提高了程式碼的可擴充套件性和可重用性。讓我們瞭解 TypeScript 中泛型類的工作原理。

語法

你可以遵循以下語法在 TypeScript 中使用泛型類。

class class_name<T, U> {
    // Class body
}
let obj1 = new class_name<data_type_1, data_type_2>();

在上述語法中，“class”是定義類的關鍵字。
“class_name”是一個有效的識別符號，代表類名。
“<T, U>”是在尖括號中指定的型別引數。你可以根據需要指定多個。
在定義類的物件時，需要在類名後的尖括號中傳遞資料型別作為引數。

示例

在下面的程式碼中，我們定義了一個名為“Box”的泛型類，它接受型別引數 T。

在類中，我們定義了型別為 T 的“val”變數，以及初始化“val”變數值的建構函式。

之後，我們分別定義了名為 get() 和 set() 的 getter 和 setter 方法，用於獲取“val”變數的值。

接下來，我們定義了 Box 類的“box1”和“box2”物件，它們分別將數字和字串資料型別作為型別引數。

// generic class
class Box<T> {
    // member variable
    val: T;

    // constructor with value
    constructor(value: T) {
        this.val = value;
    }

    // Method to get value
    get(): T {
        return this.val;
    }

    // Method to set value
    set(value: T): void {
        this.val = value;
    }
}

// create object of Box class
let box1 = new Box<number>(10);
console.log(box1.get()); // 10

let box2 = new Box<string>("Hello");
console.log(box2.get()); // Hello

編譯後，它將生成以下 JavaScript 程式碼

// generic class
class Box {
    // constructor with value
    constructor(value) {
        this.val = value;
    }
    // Method to get value
    get() {
        return this.val;
    }
    // Method to set value
    set(value) {
        this.val = value;
    }
}
// create object of Box class
let box1 = new Box(10);
console.log(box1.get()); // 10
let box2 = new Box("Hello");
console.log(box2.get()); // Hello

輸出

上述程式碼的輸出如下：

10
Hello

示例

在下面的 TypeScript 程式碼中

我們定義了接受型別引數“T”的“Stack”類。
在類中，我們定義了私有變數“st”，其型別為 T 型別陣列。
建構函式初始化“st”陣列。
push() 方法接受型別為“T”的元素作為引數，並將其插入到“st”陣列中。
pop() 方法從“st”陣列中移除最後一個元素並返回它。
peek() 方法返回陣列中的最後一個元素。
isEmpty() 方法根據陣列是否為空返回布林值。
size() 方法返回“st”陣列的大小。
接下來，我們使用數字資料型別定義了 Stack 類的物件，並使用 Stack 類的各種方法執行各種操作。

// Defining the class stack
class Stack<T> {
    // Defining the private array to store the stack elements
    private st: T[] = [];

    // Constructor to initialize the stack with initial contents
    constructor(initialContents?: T[]) {
        if (initialContents) {
            this.st = initialContents;
        }
    }

    // Method to push an element to the stack
    push(item: T): void {
        this.st.push(item);
    }

    // Method to pop an element from the stack
    pop(): T | undefined {
        return this.st.pop();
    }

    // Method to get the top element of the stack
    peek(): T | undefined {
        return this.st[this.st.length - 1];
    }

    // Method to check if the stack is empty
    isEmpty(): boolean {
        return this.st.length === 0;
    }

    // Method to get the size of the stack
    size(): number {
        return this.st.length;
    }
}

// Usage Example
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);

console.log(numberStack.peek());  // Outputs: 3
console.log(numberStack.pop());   // Outputs: 3
console.log(numberStack.peek());  // Outputs: 2
console.log(numberStack.isEmpty()); // Outputs: false
console.log(numberStack.size());    // Outputs: 2

編譯後，它將生成以下 JavaScript 程式碼

// Defining the class stack
class Stack {
    // Constructor to initialize the stack with initial contents
    constructor(initialContents) {
        // Defining the private array to store the stack elements
        this.st = [];
        if (initialContents) {
            this.st = initialContents;
        }
    }
    // Method to push an element to the stack
    push(item) {
        this.st.push(item);
    }
    // Method to pop an element from the stack
    pop() {
        return this.st.pop();
    }
    // Method to get the top element of the stack
    peek() {
        return this.st[this.st.length - 1];
    }
    // Method to check if the stack is empty
    isEmpty() {
        return this.st.length === 0;
    }
    // Method to get the size of the stack
    size() {
        return this.st.length;
    }
}
// Usage Example
const numberStack = new Stack();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);
console.log(numberStack.peek()); // Outputs: 3
console.log(numberStack.pop()); // Outputs: 3
console.log(numberStack.peek()); // Outputs: 2
console.log(numberStack.isEmpty()); // Outputs: false
console.log(numberStack.size()); // Outputs: 2

輸出

上述程式碼的輸出如下：

3
3
2
false
2

使用泛型類實現泛型介面

泛型類也可以實現泛型介面。因此，開發人員可以使用單個泛型介面來實現多個泛型類，從而實現程式碼重用。

語法

你可以遵循以下語法來使用泛型類實現泛型介面。

class class_name<T> implements interface_name<T> {
    // Class body
}

在上述語法中，“class class_name<T>”定義了泛型類。
“implements”是使用類實現介面的關鍵字。
“interface_name<T>”是一個泛型介面。

示例

在下面的例子中

我們定義了一個名為“dataBase”的泛型介面，它定義了 findById() 和 save() 方法。
接下來，我們定義了一個名為“memorydataBase”的泛型類，並使用“dataBase”介面實現它。
在類中，我們定義了“items”對映，它儲存數字值作為鍵，型別為“T”的值。
接下來，我們實現了 findById() 方法，它從對映中按鍵訪問值並返回它。
save() 方法將鍵值對儲存在“items”對映中。
最後，我們建立了“MemorydataBase”類的物件，並使用此方法執行各種操作。

// Defining a generic interface
interface dataBase<T> {
    findById(id: number): T | undefined;
    save(item: T): void;
}

// Defining a class that implements the generic interface
class MemorydataBase<T> implements dataBase<T> {
    // Defining a private property that is a map of items
    private items = new Map<number, T>();

    // Implementing the findById method
    findById(id: number): T | undefined {
        return this.items.get(id);
    }

    // Implementing the save method
    save(item: T): void {
        const id = this.items.size + 1;
        this.items.set(id, item);
    }
}

// Creating an instance of the MemorydataBase class
const repo = new MemorydataBase<string>();
repo.save("Hello");
console.log(repo.findById(1)); // Outputs: Hello

編譯後，它將生成以下 JavaScript 程式碼

// Defining a class that implements the generic interface
class MemorydataBase {
    constructor() {
        // Defining a private property that is a map of items
        this.items = new Map();
    }
    // Implementing the findById method
    findById(id) {
        return this.items.get(id);
    }
    // Implementing the save method
    save(item) {
        const id = this.items.size + 1;
        this.items.set(id, item);
    }
}
// Creating an instance of the MemorydataBase class
const repo = new MemorydataBase();
repo.save("Hello");
console.log(repo.findById(1)); // Outputs: Hello

輸出

上述程式碼的輸出如下：

Hello

你可以使用“extends”關鍵字在泛型類中使用各種約束。始終建議在程式碼中使用泛型引數、約束、介面和類，以使其可擴充套件和可重用。

列印頁面