一文搞懂TypeScript泛型, 让你的组件复用性大幅提升

泛型是一个强大的工具，可以帮助我们创建可复用的函数。在TypeScript中，我们可以声明变量和其他数据结构为特定类型，例如对象、布尔值或字符串类型。而通过使用泛型，我们可以处理传递给函数的多种类型的变量。

在这篇文章中，我们将学习如何通过泛型实现类型安全，同时不牺牲性能或效率。泛型允许我们在尖括号中定义一个类型参数，如。此外，它们还允许我们编写泛型类、方法和函数。

我们将深入探讨在TypeScript中使用泛型的方法，展示如何在函数、类和接口中使用它们。我们将会讨论如何传递默认泛型值、多个值以及条件值给泛型。最后，我们还会讨论如何为泛型添加约束。

一、TypeScript泛型（generics）是什么？

在TypeScript中，泛型是一种创建可复用组件或函数的方法，能够处理多种类型。它们允许我们在编译时构建数据结构，而不需要在编译时设置特定的类型。

泛型的作用是编写可复用的、类型安全的代码，变量的类型在编译时是已知的。这意味着我们可以动态定义参数或函数的类型，而这些类型会在编译之前声明。这在我们需要在应用程序中使用某些逻辑时非常有用；通过这些可复用的逻辑片段，我们可以创建接受和返回自己类型的函数。

我们可以使用泛型在编译时进行检查，消除类型转换，并在整个应用程序中实现其他泛型函数。没有泛型，我们的应用程序代码可能会在某个时候编译成功，但我们可能得不到预期的结果，这可能会将错误推到生产环境中。

通过使用泛型，我们可以参数化类型。这一强大的功能可以帮助我们创建可复用、通用和类型安全的类、接口和函数。

泛型的优势

类型安全：泛型确保在编译时进行类型检查，这样可以防止在运行时出现类型错误。

代码复用：使用泛型，我们可以编写一次代码，适用于多种数据类型，从而提高代码的复用性。

可读性和可维护性：泛型使代码更具可读性和可维护性，因为它们使我们能够明确地表达数据结构的意图和用途。

二、泛型示例

创建没有使用泛型的函数

让我们先来看一个简单的例子。下面是一个简单的函数，它将为对象数组添加新的属性。我们定义了一个接口MyObject，该接口包含一个id和一个pet属性：

interface MyObject { id: number; pet: string;}const myArray: MyObject[] = [ { id: 1, pet: "dog" }, { id: 2, pet: "cat" },];const newPropertyKey = "checkup";const newPropertyValue: string = '2023-12-03';const newPropertyAddition = myArray.map((obj) => ({ ...obj, [newPropertyKey]: newPropertyValue,}));console.log(newPropertyAddition);

在这个例子中，我们为数组中的每个对象添加了一个新的属性checkup。但假设我们有一个接受字符串的属性，并且我们希望添加一个接受数字的新属性，而不想重新编写另一个函数，这时泛型就派上用场了！

使用泛型创建函数

让我们来看一下如何使用泛型来解决这个问题。如果我们传递一个字符串数组给上面的函数，它将抛出错误：

'Type ‘number’ is not assignable to type of ‘string’

我们可以通过添加any到类型声明中来修复这个问题：

interface MyObject { id: number; pet: string;}const myArray: MyObject[] = [ { id: 1, pet: "dog" }, { id: 2, pet: "cat" },];const newPropertyKey = "checkup";const newPropertyValue: any = 20231203;const newPropertyAddition = myArray.map((obj) => ({ ...obj, [newPropertyKey]: newPropertyValue,}));console.log(newPropertyAddition);

然而，如果我们不定义特定的数据类型，那么使用TypeScript就没有意义了。让我们用泛型来重构这个函数：

type MyArray = Array;type AddNewProperty = { [K in keyof T]: T[K];} & { newProperty: string };interface MyObject { id: number; pet: string;}const myArray: MyArray = [ { id: 1, pet: "dog" }, { id: 2, pet: "cat" },];const newPropertyAddition: MyArray> = myArray.map((obj) => ({ ...obj, newProperty: "New value",}));console.log(newPropertyAddition);

在这里，我们定义了一个名为的类型，使其更具通用性。它将持有由函数本身接收的数据类型。这意味着函数的类型现在是参数化的。

首先，我们定义一个表示对象数组的泛型类型MyArray，并创建另一个类型AddNewProperty，该类型向数组中的每个对象添加一个新属性。

为了提高清晰度，我们可以创建一个函数，该函数接受一个泛型作为参数并返回一个泛型：

function genericsPassed(arg: T): [T] { console.log(typeof(arg)); return [arg];}// 传递了一个数字genericsPassed(3);// 传递了一个日期对象genericsPassed(new Date);// 传递了一个正则表达式genericsPassed(new RegExp("/([A-Z])w+/g"));

使用泛型创建TypeScript类

让我们来看一个在类中使用泛型的例子：

class MyObject { id: number; pet: string; checkup: T; constructor(id: number, pet: string, additionalProperty: T) { this.id = id; this.pet = pet; this.checkup = additionalProperty; }}const myArray: MyObject[] = [ new MyObject(1, "cat", "false"), new MyObject(2, "dog", "true"),];const newPropertyAddition: MyObject[] = myArray.map((obj) => { return new MyObject(obj.id, obj.pet, obj.id % 2 === 0);});console.log(newPropertyAddition);

在这个例子中，我们创建了一个名为MyObject的简单类，该类包含一个数组变量id、pet和checkup。我们还定义了一个泛型类MyObject，表示具有id、pet和类型为T的附加属性additionalProperty的对象。构造函数接受这些属性的值。

三、泛型接口的使用

泛型不仅限于函数和类，我们也可以在 TypeScript 中的接口内使用泛型。泛型接口使用类型参数作为占位符来表示未知的数据类型。当我们使用泛型接口时，可以用具体的类型填充这些占位符，从而定制结构以满足我们的需求。

示例：泛型接口的使用

基本示例

假设我们有一个函数 currentlyLoggedIn，它接收一个对象并返回包含 online 状态的扩展对象。以下是没有泛型的实现：

上面的代码会报错，因为 currentlyLoggedIn 函数不知道它接收到的对象类型。我们可以使用泛型来解决这个问题：

在这个例子中，我们用声明了一个泛型参数 T，函数可以处理任何对象类型，并且返回的对象包含 online 属性。

使用泛型接口

我们可以在接口中使用泛型来定义更复杂的数据结构。例如：

在这个例子中，是类型参数，可以在使用接口时替换为任何有效的 TypeScript 类型。

现实世界中的应用：泛型接口 ILogger

下面是一个现实世界中的例子，展示了如何使用泛型接口。我们创建了一个 ILogger 接口，定义了一个log方法，该方法接受消息和任意类型的数据（T）：

interface ILogger { log(message: string, data: T): void;}

ILogger 接口可以用于任何数据类型，使我们的代码更适应不同的场景，并确保记录的数据类型正确。

实现 ConsoleLogger 类

首先，我们创建一个实现 ILogger 接口的 ConsoleLogger 类：

class ConsoleLogger implements ILogger { log(message: string, data: any) { console.log(`${message}:`, data); }}const user = { name: "John Lee", age: 22 };const consoleLogger = new ConsoleLogger;consoleLogger.log("New user added", user);

我们可以使用 ConsoleLogger 打印消息和任何类型的数据到控制台。

实现 FileLogger 类

接下来，我们创建一个实现 ILogger 接口的 FileLogger 类，将消息记录到文件中：

class FileLogger implements ILogger { private filename: string; constructor(filename: string) { this.filename = filename; } log(message: string, data: string): void { console.log(`Writing to file: ${this.filename}`); // ... write logEntry to file ... }}const fileLogger = new FileLogger("userlog.txt");fileLogger.log("User information", JSON.stringify(user));

通过使用泛型接口 ILogger，我们可以实现一个通用的日志记录类，处理任何数据类型，使我们的代码更加灵活。

四、为泛型传递默认值

在 TypeScript 中，我们可以为泛型传递默认类型值。这在某些情况下非常有用，例如当我们不希望强制传递函数处理的数据类型时。通过设置默认类型，我们可以让泛型在没有明确指定类型时使用默认值。

示例：设置默认泛型类型

下面是一个示例，我们将泛型类型默认为 number：

function removeRandomArrayItem(arr: Array): Array { const randomIndex = Math.floor(Math.random * arr.length); return arr.splice(randomIndex, 1);}console.log(removeRandomArrayItem([45345, 3453, 356753, 3562345, 3567235]));

在这个代码片段中，我们使用了默认泛型类型 number 来实现 removeRandomArrayItem 函数。如果调用时不提供具体的类型参数，TypeScript 将使用默认类型 number。

为什么使用默认泛型类型

简化调用：默认泛型类型使函数调用更简单，不需要每次都指定类型参数。

提高灵活性：在某些情况下，用户可能不关心类型参数是什么，通过提供默认类型，我们可以让代码更灵活。减少冗余：在某些常见情况下，指定类型是多余的，通过默认值可以减少代码的冗余。

五 、传递多个泛型值

如果我们希望函数能够接受多个泛型参数，可以这样做：

function removeRandomAndMultiply(arr: Array, multiply: Y): [T[], Y] { const randomIndex = Math.floor(Math.random * arr.length); const multipliedVal = arr.splice(randomIndex, 1); return [multipliedVal, multiply];}console.log(removeRandomAndMultiply([45345, 3453, 356753, 3562345, 3567235], 608));

在这个例子中，我们修改了之前的函数，引入了另一个泛型参数 Y。我们用字母 Y 表示，并将其默认类型设置为 number，因为它将用于乘以从数组中挑选的随机数。因为我们在处理数字，所以可以传递默认的泛型类型 number。

六、传递条件值给泛型

有时，我们可能希望传递符合某个条件的特定数量的值。我们可以通过定义一个带有条件泛型类型参数的类来实现这一点：

class MyNewClass { petOwner: T[]; constructor(pets: T[]) { this.petOwner = pets; } processPets(callback: (pet: T) => X): X[] { return this.petOwner.map(callback); }}interface MyObject { id: number; pet: string;}const myArray: MyObject[] = [ { id: 1, pet: "Dog" }, { id: 2, pet: "Cat" },];const myClass = new MyNewClass(myArray);const whichPet = myClass.processPets((item) => { // 根据 item 属性添加条件逻辑 if (item.pet === 'Dog') { return "You have a dog as a pet!"; } else { return "You have a cat as a pet!"; }});console.log(whichPet);

在上述代码中，我们定义了一个类 MyNewClass

MyNewClass 的 processPets 方法接受一个回调函数，该回调函数遍历每个项目并检查定义的条件。whichPet 的返回值将是一个基于回调函数中提供的条件的值数组。我们可以添加条件并定义逻辑，以根据需求和具体情况进行调整。

七 、为泛型添加约束

泛型允许我们处理作为参数传递的任何数据类型。然而，我们可以为泛型添加约束，以将其限制为特定类型。这样可以确保我们不会获取不存在的属性。

添加约束的示例 一个类型参数可以被声明为受限于另一个类型参数。这将帮助我们在对象上添加约束，确保我们不会获取不存在的属性：

function getObjProperty(obj: Type, key: Key) { return obj[key];}let x = { name: "Benny barks", address: "New York", phone: 7245624534534, admin: false };console.log(getObjProperty(x, "name")); // Benny barksconsole.log(getObjProperty(x, "admin")); // falseconsole.log(getObjProperty(x, "loggedIn")); // Error: Property 'loggedIn' does not exist on type '{ name: string; address: string; phone: number; admin: boolean; }'

在上面的例子中，我们创建了一个函数getObjProperty，它接受两个参数：一个对象obj和一个键key。我们为第二个参数添加了一个约束Keyextendskeyof Type，确保传递的键必须是对象类型中的一个有效键。

为什么要添加约束

添加约束可以帮助我们在编译时捕获错误，而不是在运行时。这种方法提供了更高的类型安全性，防止了试图访问对象中不存在的属性。

八、动态数据类型的泛型实现

泛型允许我们在定义函数和数据结构时使用各种数据类型，并同时保持类型安全。当类型在运行时才确定时，我们可以使用泛型来定义函数；这些泛型类型将在运行时被具体的类型替换。通过传递泛型类型参数，我们可以处理包含多种数据类型的数组，反序列化JSON数据，或处理动态的HTTP响应数据。

使用泛型构建API客户端

假设我们正在构建一个与API交互的Web应用程序。我们需要创建一个能够处理不同API响应和各种数据结构的API客户端。我们可以定义一个API服务如下：

interface ApiResponse { data: T;}class ApiService { private readonly baseUrl: string; constructor(baseUrl: string) { this.baseUrl = baseUrl; } public async get(url: string): Promise> { const response = await fetch(`${this.baseUrl}${url}`); const data = await response.json as T; return { data }; }}

在这里，我们定义了一个ApiResponse接口，它表示一个通用的API响应结构。该接口包含一个类型为T的data属性，还可以扩展其他属性（例如，状态、错误信息）。接着，我们创建了一个ApiService类，其中包括一个泛型函数，该函数接受一个URL路径并返回一个Promise。该函数从提供的URL获取数据，解析并断言JSON响应（data as T）。

使用泛型类型，ApiService类可以通过改变get函数中的类型参数T，在不同的API端点间重用。如下例所示，我们可以使用相同的apiClient来调用两个端点，分别获取客户端和产品：

interface Client { id: number; name: string; email: string;}interface Product { id: number; name: string; price: number;}const apiClient = new ApiService('https://api.example.com');async function getClient(id: number): Promise { const response = await apiClient.get(`/clients/${id}`); return response.data;}async function getProducts: Promise { const response = await apiClient.get("/products"); return response.data;}// 示例调用getClient(1).then(client => console.log(client));getProducts.then(products => console.log(products));

在这个例子中，getClient函数和getProducts函数使用相同的apiClient来调用不同的端点，并获取不同类型的数据。通过使用泛型，我们能够在编译时确保类型安全，并在运行时根据实际需求处理不同的数据类型。

通过泛型，我们可以编写更加灵活和可复用的代码，特别是在处理动态数据类型时。泛型在API客户端的实现中尤为有用，它允许我们在不同的API端点间共享代码，同时保持类型安全。掌握这些技巧，可以帮助我们构建更加健壮和高效的应用程序。

九、关于泛型的一些注意事项

TypeScript 的泛型是一种强大的工具，但在大型代码库中使用它们时，需要了解一些最佳实践。

1. 使用描述性名称

在定义泛型接口或函数时，使用清晰和描述性的类型参数名称。这样可以更准确地反映预期的数据类型，使代码更易读和可维护。

例如，我们定义一个doubleValue函数。这个泛型函数表达了函数的预期类型和意图，使代码更易于理解和维护：

function doubleValue(value: T): T { return value * 2;}

2. 必要时应用约束

使用类型约束（extends关键字）来限制可以与泛型一起使用的类型，确保只接受兼容的类型。

在下面的示例中，定义了一个泛型接口并将其应用为参数约束，因此findById函数只接受实现特定接口的对象：

interface Identifiable { id: T;}function findById>(collection: U[], id: T) { return collection.find(item => item.id === id);}

3. 利用实用类型

TypeScript 提供了一些实用类型（如Partial、Readonly和Pick），以便于常见的数据操作。这些类型可以增强代码的可读性和可维护性。

例如，Partial 创建一个可选属性的类型：

interface User { id: number; name: string; email?: string;}// Partial 创建一个可选属性的类型type UserPartial = Partial; const userData: UserPartial = { name: "Alice" }; // 只给出部分属性

4. 使用泛型默认值

在某些情况下，可以为泛型参数提供默认值，以减少使用泛型时的复杂性。

interface ApiResponse { data: T; status: number; message: string;}// 默认情况下，T 是 `any`const response: ApiResponse = { data: { name: "Alice" }, status: 200, message: "Success"};

5. 避免过度泛型化

不要过度使用泛型。虽然泛型很强大，但不必要的泛型化会使代码复杂化并难以理解。只在需要的地方使用泛型。

6. 文档化和注释

在代码中使用泛型时，确保有良好的文档和注释，解释泛型参数的用途和限制。这有助于其他开发人员理解和使用你的代码。

十、 TypeScript 泛型常见问题

在使用 TypeScript 泛型时，我们经常会遇到类似“type is not generic”的问题。解决这些问题需要系统的方法和对泛型在 TypeScript 中工作原理的理解。以下是一些常见问题及其解决策略。

常见问题及解决策略

1. “Type is not generic” / “Generic typerequirestypeargument”

这个错误通常发生在使用泛型类型而没有提供必要的类型参数时，或者在使用非泛型类型时使用了类型参数。解决方法是指定数组应该包含的元素类型。例如，在下面的代码片段中，修正的方法是添加类型参数，如 const foo:Array= [1, 2, 3];：

interface User { id: number;}// 尝试将 User 用作泛型参数const user: User = {}; // Type is not genericconst foo: Array = [1, 2, 3]; // Generic type 'Array' requires 1 type argument(s).

解决方法

确保你在使用泛型类型时提供了必要的类型参数：

interface User { id: number;}// 正确使用 User 类型const user: User = { id: 1 };const foo: Array = [1, 2, 3]; // 正确添加类型参数

2. “Cannot Find Name 'T'”

这个错误通常发生在使用未声明或不在作用域内的类型参数（T）时。要解决此问题，请正确声明类型参数或检查其使用中的拼写错误：

// 尝试在未声明类型参数的情况下使用 T 作为泛型类型参数function getValue(value: T): T { // Cannot find name 'T'. return value;}// 通过声明 T 作为泛型类型参数修复错误function getValue(value: T): T { return value;}

结束

在这篇文章中，我们深入探讨了 TypeScript 泛型的强大功能及其最佳实践。通过具体的示例和详细的解释，我们展示了如何利用泛型创建灵活、可复用且类型安全的代码。泛型不仅能帮助我们减少运行时错误的风险，还能显著提高代码的可维护性和可读性。

希望这篇文章能帮助你更好地理解和应用 TypeScript 中的泛型。如果你在实践中遇到任何问题，或者有任何想法和建议，欢迎在评论区与我们交流讨论！如果你觉得这篇文章对你有所帮助，不妨分享给你的朋友，让更多人受益。