TypeScript 中泛型使用指南

TypeScript，基于 JavaScript 之上编写的强类型语言，使得编写大型应用的代码发生了变革，它提供了先进的类型特性和工具，比如类型接口，泛型（作为最强大的工具之一，用于编写可扩展，可重用组件而不牺牲类型安全性）。在本文中，我们将深入 TypeScript 的泛型世界，探索它们怎么用来编写干净，更可维护性且强健和易理解的代码。

了解 TypeScript 中的泛型

泛型 Generics 不仅仅是 TypeScript 中的一个基本概念，在很多现代编程语言中也存在。它允许开发者通过传递参数到组件（比如函数，接口或者类）的方式编写可扩展、可重用的代码。本质上，泛型允许创建的组件可以在多种类型上工作，而不是在单一的类型上。

其核心是，TypeScript 泛型语法允许在尖括号内 <>内定义一个类型变量。这个类型变量随后可以在组件（比如函数或者类定义）中被使用，在事先不知道该类型是什么的情况下强制执行一致的类型使用。

比如，TypeScript 中一个简单的泛型函数可能像这个：

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

在这个简单的例子中，T 是一个类型变量，它会决定函数什么时候被调用。我们可以通过 number，string 或者其他类型调用 identity 函数，其会返回相同的类型值，确保在整个操作中是类型安全的。

泛型相比 any 类型，展示了它们真正的优势。虽然 any 类型允许任何类型的值并有效地选择退出类型检查，但是它的代价是丢失类型信息。泛型，另一方面，提供了保持类型信息完整的方法，与编译器一起维护类型安全，并提供开发人员在现代 IDE 中所期待的 IntelliSencse 和代码完善功能。当工作中处理集合，算法和数据结构的时候，它们尤其好用，因为泛型允许我们编写任何类型的代码，而不丢失类型信息。

泛型的实际应用

泛型提供了一种通用且类型安全的方式来处理 TypeScript 中的数据结构和算法。通过使用，开发者可以确保他们的代码可以在任何类型上运行，而不牺牲类型信息。让我们探索一些 TypeScript 项目中的泛型的实际应用。

函数中使用泛型

其中一个使用泛型的使用场景是函数创建。通过使用泛型，我们可以编写函数，这个函数接受任何类型参数并返回相同类型，确保连续性和类型安全。下面例子是一个简单泛型函数，该函数返回任何类型的数组中的第一个元素：

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

在上面的函数中，类型变量 T 代表数组元素类型，允许函数使用的数组元素可以是数字，字符串，甚至复杂的对象，与此同时保留类型信息。

在接口和类中使用泛型

在定义特定类型进行操作接口或者类时，泛型也非常有用。以一个泛型 Queue 类为例，该类接受任何类型的元素：

class Queue<T> {
  private data: T[] = [];
  push(item: T) {
    this.data.push(item);
  }
  // 从 return 语句返回的类型推断是 "T ｜ undefined"
  pop() {
    return this.data.shift();
  }
}

Queue 类使用泛型 T 进行运算，使该类可重用于我们需要 queue 的任何类型数据。

流行库/框架中泛型现实例子

泛型不仅仅是理论概念，在现实的库和框架中它们被广泛使用，提供可扩展和类型安全的解决方案。比如，在 Angular 中，我们可以使用泛型来定义一个可观察对象来处理特定数据类型：

import { Observable } from "rxjs";

function getData<T>(): Observable<T> {
  // 实现返回一个类型 T 的可观察对象功能
}

在 TypeScript 的 React 上下文中，我们可能会使用泛型来输入内置钩子 built-in hooks 或者组件属性：

interface Props<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>(props: Props<T>) {
  return (
    <div>
      {props.items.map(props.renderItem)}
    </div>
  );
}

在函数，类，接口，甚至在框架中使用泛型，开发者可以编写更可维护性，更有扩张性和更健壮的代码，来适应更大范围的场景。通过探讨这些实际应用，我们将更深入地研究 TypeScript 提供的高级通用技术，以帮助我们处理复杂的设计模式。

高级的泛型技术

随着 TypeScript 开发人员对基本泛型越来越熟悉，他们可以利用先进的技术来构建更加强大和灵活的抽象。让我们看下其中一些技术，包括 constraints，utility 类型和使用 keyof 关键字。

泛型中的约束 constraints

通过添加约束来更优化泛型，以便限制可以使用的类型。该功能可确保泛型遵循特定的结构和属性集。下面是一个需要 length 属性类型的约束：

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

在这个方法中，类型 T 被限制需要有类型 number 的 length 属性，比如数组或者字符串。通过这个方法，这能函数能放心使用将会存在的传递过来的参数的 length 属性。

泛型中使用 keyof

TypeScript 中 keyof 操作符可以在泛型中结合使用，来确保属性名的类型安全。它生成类型的已知公共属性名称的联合。下面是它可能与泛型一起使用的方式：

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

当使用这个函数，TypeScript 确保传递过来的是存在对象的键，避免因为传递不存在属性生成运行时错误。

泛型实用类型 utility

TypeScript 包含系列实用类型，可以更轻松地使用泛型以各种形式转换类型。一些有用的泛型 utility 类型如下：

• Partial<T> – 使得 T 所有的属性可选
• Readonly<T> – 使得 T 所有的属性只读
• Pick<T, K> – 创建一个类型，该类型具有来自另一个类型 T 的属性 K 子集
• Record<K, T> – 创建一个类型，该类型具有类型 T 的一组属性 K

这些实用类型可以很大程度简化功能类型转换，确保我们的代码精简和富有表现力。比如，我们可以编写一个表示只读接口的可编辑版本类型：

interface ReadOnlyPerson {
  readonly name: string;
  readonly age: number;
}

type WritablePerson = Partial<ReadOnlyPerson>;

在这个基础上，最后一章节将讨论使用泛型时的最佳实践和常见陷阱。

使用泛型的最佳实践和常见陷阱

当开发者将泛型集成到他们的 TypeScript 项目中，遵循一些最佳实践来保持清晰度并防止常见陷阱非常重要。在该章节中，我们将讨论使用使用泛型的基本技巧，以及如何避免可能导致复杂错误或降低代码可读性的错误。

命名泛型变量的最佳实践

命名泛型变量应该是直观的，如果可能，应该具有描述性。单个单词命名 T 代表 type 是常见的，有时我们选择更具描述性命名可以显著提升代码可读性，特别是在处理过个泛型。比如：

interface KeyValuePair<KeyType, ValueType> {
  key: KeyType;
  value: ValueType;
}

这种表示方法比简单使用 K 和 V 作为变量更加清晰，因为它立即传达了键值对上下文中每种类型的含义。

避免泛型中常见的错误

使用泛型中一个常见的错误是假设一个泛型有确定的属性或者方法而没正确约束。这个会导致运行时错误。当我们希望一个类型变量有特定的行为，要时刻记得定义合适的约束。

function calculateLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}

另一个问题是，过度使用泛型。泛型应该用来添加有意义，可扩展性的代码。 如果一个类型只是覆盖少数特定类型，应该使用联合类型 union type。

性能考虑

泛型通常不会直接作用于运行时性能，因为 TypeScript 编译为 JavaScript，类型信息被删除。然而，使用过于复杂的类型可能会影响编译时性能并导致开发迭代周期变慢。 合理使用泛型，如果怀疑它们对我们的工作流程有害，我们需要对编译时间进行基准测试。

当泛型对我们代码的重用性和类型安全有帮助，那么就应该引用进来。下面的明智使用泛型的场景：

• 函数，类，或者接口可对多种类型进行操作
• 发现自己在为不同类型编写重复代码
• 我们需要在不同属性或者函数之间保持类型关联

然而，避免掉入 “为了用泛型而用泛型” 的陷阱。如果我们的代码只需要特定已知的类型中使用，泛型可能带来不必要的复杂度而不会有实际的好处。

小结

总得来说，TypeScript 中的泛型功能很强大，当有效使用它们，会很好地增强我们代码的可扩展性，可重用性和类型安全性。通过理解他们的实际应用，掌握高级技术并遵循最佳实践，我们将有能力在 TypeScript 项目中充分发挥泛型的潜力。请记得，在深思熟虑后，将它整合到我们的开发流程中，并享受正确使用它们所产生的类型安全和可维护性代码的乐趣。