TypeScript 类、泛型的使用实践记录｜青训营本文探讨了在 TypeScript 中如何运用泛型的强大特性来增

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，通过添加静态类型特性使得代码更加可靠和易于维护。在 TypeScript 中，泛型是一项强大的特性，它允许我们在编写函数、类或接口时使用一种抽象的数据类型，以增加代码的灵活性和安全性。本文将探讨 TypeScript 中泛型的使用方法和场景，以及如何使用类型约束来达到这些目的。

1. 泛型基础

1.1 泛型函数

首先，让我们从一个简单的泛型函数开始。考虑以下需求：我们想要编写一个函数，它可以交换两个值的位置。使用泛型，我们可以编写如下代码：

function swap<T>(a: T, b: T): [T, T] {
    return [b, a];
}

const result = swap(10, 20); // result: [20, 10]

在这个例子中，<T> 表示泛型参数的占位符，我们可以在函数参数和返回值中使用这个泛型类型。

1.2 泛型类

除了函数，我们还可以在类中使用泛型。考虑一个简单的堆栈（Stack）类，我们希望它可以存储不同类型的元素：

class Stack<T> {
    private items: T[] = [];

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

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

const stringStack = new Stack<string>();
stringStack.push("Hello");
stringStack.push("World");
console.log(stringStack.pop()); // Output: "World"

2. 泛型约束

在某些情况下，我们希望对泛型参数施加一些限制，以确保代码的正确性。这时就需要使用泛型约束。

2.1 使用 extends 关键字

假设我们要编写一个函数，从对象中获取指定属性的值。为了保证属性存在，我们可以使用泛型约束：

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const user = { id: 1, name: "Alice" };
const userName = getProperty(user, "name"); // userName: "Alice"

在这个例子中，K extends keyof T 限制了 key 参数必须是 obj 对象 T 的属性之一。

2.2 使用接口进行约束

有时候，我们希望泛型参数实现特定的接口。例如，我们想确保传入的对象具有某个特定的方法：

interface Printable {
    print(): void;
}

function printObject<T extends Printable>(obj: T) {
    obj.print();
}

class Person implements Printable {
    constructor(private name: string) {}

    print() {
        console.log(`Name: ${this.name}`);
    }
}

const person = new Person("Bob");
printObject(person); // Output: "Name: Bob"

3. 泛型在实际项目中的应用

3.1 异步操作封装

在处理异步操作时，泛型可以帮助我们编写通用的异步函数：

async function fetchData<T>(url: string): Promise<T> {
    const response = await fetch(url);
    const data = await response.json();
    return data as T;
}

interface Todo {
    id: number;
    title: string;
}

const todo = await fetchData<Todo>("https://api.example.com/todos/1");

3.2 容器类的灵活性

泛型还可以用于容器类，使其适用于不同类型的数据：

class Container<T> {
    private value: T;

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

    getValue(): T {
        return this.value;
    }
}

const numberContainer = new Container(42);
const stringContainer = new Container("Hello");

总结

通过使用 TypeScript 的泛型特性，我们可以在代码中引入更高层次的抽象，增加代码的灵活性和安全性。无论是函数、类还是接口，泛型都可以为我们提供一种通用的方式来处理不同类型的数据。同时，泛型约束也使得我们能够在保证代码正确性的前提下进行更精确的操作。在实际项目中，泛型可以用于处理异步操作、容器类以及许多其他场景，极大地提高了代码的可复用性和可维护性。

TypeScript 类、泛型的使用实践记录 ｜ 青训营