用类型泛型提升 TypeScript 类型系统

前端

2023-10-12 12:02:14

类型泛型：TypeScript 类型系统的超级助力

TypeScript 作为一种流行的编程语言，以其强大的类型系统而闻名，它能够在编译时捕获类型错误，从而提高代码质量和可靠性。然而，对于复杂且可重用的代码，TypeScript 的类型系统有时会遇到局限性。

这时，类型泛型就登场了。泛型允许您定义可用于各种数据类型的不变类型。通过使用泛型，您可以编写更灵活、更通用的代码，从而节省时间和精力，同时保持代码的高质量。

泛型的优势：释放 TypeScript 的真正潜力

泛型为 TypeScript 类型系统带来了诸多好处：

代码复用： 泛型允许您编写可用于多种数据类型的代码，从而消除重复代码的需求并提高代码的可维护性。
增强类型安全性： 泛型通过强制类型检查来增强类型安全性，确保在编译时捕获类型错误，从而防止运行时错误。
简化代码重构： 通过使用泛型，您可以轻松地重构代码，而无需担心破坏类型安全性，从而提高代码的可扩展性和灵活性。

实践泛型：赋能您的 TypeScript 技能

定义泛型类型

要定义泛型类型，请使用尖括号 <> 指定类型变量。例如：

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

此函数接受一个类型为 T 的参数并返回相同类型的参数。类型变量 T 可以是任何类型，包括基本类型、对象类型或其他泛型类型。

使用泛型函数

您可以使用泛型函数来处理各种数据类型。例如：

const numArray: number[] = [1, 2, 3];
const strArray: string[] = ['a', 'b', 'c'];

const numbersSum = sumArray(numArray);  // 类型推断为 number
const stringsSum = sumArray(strArray);  // 类型推断为 string

function sumArray<T>(arr: T[]): T {
  let sum = 0;
  for (const item of arr) {
    sum += item;
  }
  return sum;
}

此函数接受一个数组作为参数并返回数组元素类型的总和。泛型 T 允许该函数用于数字和字符串数组等不同类型的数据。

泛型类和接口

您还可以使用泛型来定义类和接口。例如：

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

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

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

const numberStack = new Stack<number>();
const stringStack = new Stack<string>();