TypeScript中的泛型：提升代码复用性和类型安全性

2023-09-18 06:19:51

泛型是TypeScript中一种强大的工具，它允许我们创建可重用的类型和函数，这些类型和函数可以在不牺牲类型安全性或代码简洁性的情况下处理不同类型的数据。通过在类型和函数声明中使用类型变量，我们可以定义一个通用的模板，该模板可以接受和处理各种类型的数据。

为什么要使用泛型？

使用泛型的主要优势包括：

代码复用性： 泛型允许我们编写可重用的代码，可以处理不同类型的数据，而无需为每种类型重复编写代码。这可以显着减少代码量并简化维护。
类型安全性： 泛型确保了类型安全，因为它在编译时强制类型检查。这意味着编译器可以检查我们的代码是否存在类型错误，例如尝试将不正确类型的参数传递给泛型函数或将不兼容类型的值分配给泛型变量。
可扩展性： 泛型提供了可扩展性，因为我们可以创建自己的泛型类型和函数，以满足特定的需求。这使我们能够创建库和框架，可以轻松地与其他代码集成。

定义时限制类型

TypeScript泛型的关键特性之一是能够在定义时限制类型。这意味着我们可以指定泛型类型变量可以接受的类型。例如，我们可以定义一个泛型函数，该函数只能接受数字类型的参数，如下所示：

function sumNumbers(nums: number[]) {
  let total = 0;
  for (let num of nums) {
    total += num;
  }
  return total;
}

在这个例子中，泛型类型变量nums被限制为只接受数组类型，而数组中的每个元素必须是数字类型。这确保了我们无法将非数字类型的数据传递给此函数，从而增强了代码的类型安全性。

只能传入number类型，无法传入string类型

由于泛型类型变量被限制为只能接受数字类型，因此我们无法将字符串类型的数据传递给此函数。如果我们尝试这样做，TypeScript编译器会产生一个类型错误，如下所示：

const numbers = ["1", "2", "3"];
const sum = sumNumbers(numbers); // Error: Argument of type 'string[]' is not assignable to parameter of type 'number[]'.

编译器会显示一个错误，因为它检测到我们尝试将一个字符串数组传递给一个只能接受数字数组的函数。

泛型函数

泛型函数是接受类型参数的函数。我们可以使用类型变量来指定函数可以处理的数据类型。例如，我们可以定义一个泛型函数，该函数可以对任何类型的数组求和，如下所示：

function sumArray<T>(arr: T[]): number {
  let total = 0;
  for (let elem of arr) {
    total += elem; // Error: Operator '+' cannot be applied to types 'T' and 'T'.
  }
  return total;
}

在这个例子中，泛型类型变量T表示数组中元素的类型。我们可以使用这个函数来对数字、字符串或任何其他类型的数组求和。但是，由于我们无法对不同类型的数据执行加法操作，因此编译器会产生一个类型错误。

为了解决这个问题，我们可以使用类型守卫或条件类型来检查数组中元素的类型并相应地执行加法操作。例如：

function sumArray<T>(arr: T[]): number {
  let total = 0;
  for (let elem of arr) {
    if (typeof elem === "number") {
      total += elem;
    } else if (typeof elem === "string") {
      total += parseFloat(elem);
    } else {
      // Handle other types here
    }
  }
  return total;
}

现在，这个函数可以对不同类型的数据执行加法操作，因为我们使用了类型守卫来检查数组中元素的类型并相应地执行加法操作。

泛型类

泛型类是接受类型参数的类。我们可以使用类型变量来指定类可以处理的数据类型。例如，我们可以定义一个泛型类，该类可以存储和管理任何类型的元素，如下所示：

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

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

  get(index: number): T {
    return this.items[index];
  }

  remove(item: T) {
    const index = this.items.indexOf(item);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
  }
}