TypeScript 泛型：完整指南

TL;DR: TypeScript 泛型允许开发人员编写可重用的代码，这些代码可以处理各种数据类型，同时保持类型安全。它们对于构建健壮且可扩展的 TypeScript 应用程序至关重要。

为了确保代码透明且可管理，Typescript 需要对多种数据进行安全有效的管理。 Typescript 的核心功能之一是 Typescript 泛型，它允许创建函数、类和接口，同时遵守严格的类型限制。泛型可以让您编写更少的代码，减少错误，最重要的是，可以为不同的数据类型构建灵活的组件。

本文探讨了 Typescript 泛型的基础知识，包括它们在函数、类和接口中的用法，并演示了它们如何使代码具有通用性和健壮性。

什么是 Typescript 泛型？

Typescript 泛型可以使用占位符类型定义 Typescript 代码，使其灵活、可扩展和可重用，同时保持类型安全。

Typescript 在编译时作为定义泛型类型的占位符进行类型安全检查。当组件被实现时，实际类型将取代占位符。这种技术使管理和减少口是心非变得更加容易，因为您不需要为每种数据类型实现不同的实现。

如果没有泛型，您将编写一个函数或类的多个版本来处理不同的数据类型，从而导致代码重复。泛型允许单个实现可重用于各种类型，同时保留静态类型检查。

下一节中的代码示例将帮助您理解这种差异。

何时使用 Typescript 泛型？

泛型可以在打字稿的不同部分使用，以帮助更有效地管理类型。它们在函数、接口、类和其他灵活性至关重要的结构中发挥着重要作用。

1. 函数中的泛型类型

泛型经常应用于函数中以减少冗余。例如，考虑一个采用字符串或数字作为参数的函数。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

这个功能运行良好。但它使用任何类型，这意味着 Typescript 会失去对特定类型的跟踪。因此，返回值的类型为 any, 并且 Typescript 无法再强制执行类型安全。如果我们需要维护类型安全，则必须编写两个不同的函数，一个返回字符串，另一个返回数字。然而，这种方法会增加代码重复。

我们可以通过使用泛型来保留类型信息来改进上述功能。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

T 表示该方法在本例中使用的类型。如果存在，Typescript 将确认输入类型和返回参数中的类型是否相同。

此外，我们可以在不显式定义参数类型的情况下定义函数。

function identity<t>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string
</string></number></t>

在 Typescript 中，在单个函数或组件中处理多种类型时，您可以使用多个泛型类型参数。例如，您可能需要一个接受两种不同类型的输入并将它们作为一对返回的函数。

const result3 = identity(100); // result3: number
const result4 = identity("world"); // result4: string

在本例中，该函数返回一个元组，其中第一个元素的类型为 T 类型，第二个元素的类型为 U。这使得函数能够对两种不同类型进行类型安全处理。

2. TypeScript 中的默认类型

在 Typescript 中，您可以为泛型提供默认类型，使其成为可选类型。如果未提供类型，Typescript 将使用默认类型。

function multipleParams<t u>(first: T, second: U): [T, U] {
 return [first, second];
}
const result1 = multipleParams<string number>("hello", 42); // result1: [string, number]
const result2 = multipleParams<string number>("hello", "world"); // result2: gives a type error
</string></string></t>

在此示例中，类型参数 T 默认为字符串。如果开发者在调用函数时没有指明具体类型，T将默认为字符串。

3. 通用接口

Typescript 泛型也可以应用于接口。想象一下，您想要定义一个 Box 接口，其值为 any 类型。

function createArray<t string>(length: number, value: T): T[] {
 return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // T defaults to string, so stringArray is a string array
const numberArray = createArray<number>(3, 42); // T is explicitly set to a number, so numberArray is a number array
</number></t>

这更等于通用函数示例；由于我们没有定义特定类型，因此该代码也可以正常工作。但是，由于该值的类型为any，，我们可能会遇到与类型相关的错误。

为了保护类型，我们可以在这里定义一个通用接口。

interface Box {
  value: any;
}
const numberBox: Box = { value: 123 }; // correct
const stringBox: Box = { value: "hello" }; // correct

接口是通用的，其值类型严格限制为 Type 变量。在创建实例时，可以将 Type 变量指定为数字或字符串，以便 Typescript 确保遵循适当的类型。

4. 泛型类

还可以使用泛型编写类来处理不同类型，同时保持类型安全。让我们创建一个 Storage 类，它可以存储和检索 any 类型的值。

interface Box<type> {
  value: Type;
}
const numberBox: Box<number> = { value: 123 }; // number
const stringBox: Box<string> = { value: "hello" }; // string
const stringBox2: Box<string> = { value: 123 }; // incorrect
</string></string></number></type>

这个类可以工作，但是由于数据的类型为 any, getItem 方法返回 any, 删除类型安全。因此，我们可以使用泛型重写类来提高类型安全性。

class Storage {
  private data: any;
  setItem(item: any): void {
    this.data = item;
  }
  getItem(): any {
    return this.data;
  }
}
const storage = new Storage();
storage.setItem(123);
const item = storage.getItem();

在本例中，T 类型由 Storage 类使用。当您在创建实例时定义数据类型时，Typescript 可确保数据正确。此代码示例中的 getItem 方法将生成一个数字。

5. 通用约束

您可以使用泛型约束来限制泛型可以接受的类型，确保它们具有特定的属性。

例如，如果您有一个函数需要访问输入的 length 属性，则可以使用约束来确保仅允许具有 length 属性的类型。这可以防止 Typescript 给出错误或让不兼容的类型漏掉。

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

此处，值 T 未使用 length 属性定义。要忽略这个问题，我们可以添加一个约束，指定 T 必须具有 length 属性。我们通过说 T 延伸 { length: number }.
来做到这一点

function identity<t>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string
</string></number></t>

现在，这个函数将具有 length 属性；它不会给出任何错误，并将按照输入的长度执行。

结论

Typescript 泛型允许您编写灵活、可回收且类型安全的代码。您可以使用具有这些泛型的类、方法和接口来管理许多数据类型，而无需重复代码。通用约束、众多类型和默认类型是我们在本文中讨论的一些关键用例，并展示了每种约束如何提高程序的可扩展性和可维护性。

了解 Typescript 泛型可以帮助您编写更精确、适应性更强且类型安全的代码，使您的 Typescript 应用程序更加健壮。

相关博客

• Webpack 与 Vite：哪个捆绑器适合您？
• 使用单 Spa 构建微前端：指南
• 使用 RxJS 掌握异步 JavaScript
• Axios 和 Fetch API？选择正确的 HTTP 客户端

以上是TypeScript 泛型：完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！