一文搞懂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<T> = Array<T>;
type AddNewProperty<T> = {
[K in keyof T]: T[K];
} & { newProperty: string };
interface MyObject {
id: number;
pet: string;
}
const myArray: MyArray<MyObject> = [
{ id: 1, pet: "dog" },
{ id: 2, pet: "cat" },
];
const newPropertyAddition: MyArray<AddNewProperty<MyObject>> = myArray.map((obj) => ({
...obj,
newProperty: "New value",
}));
console.log(newPropertyAddition);
在这里，我们定义了一个名为的类型，使其更具通用性。它将持有由函数本身接收的数据类型。这意味着函数的类型现在是参数化的。
首先，我们定义一个表示对象数组的泛型类型MyArray，并创建另一个类型AddNewProperty，该类型向数组中的每个对象添加一个新属性。
为了提高清晰度，我们可以创建一个函数，该函数接受一个泛型作为参数并返回一个泛型：
function genericsPassed<T>(arg: T): [T] {
console.log(typeof(arg));
return [arg];
}
// 传递了一个数字
genericsPassed(3);
// 传递了一个日期对象
genericsPassed(new Date());
// 传递了一个正则表达式
genericsPassed(new RegExp("/([A-Z])\w+/g"));
使用泛型创建TypeScript类
让我们来看一个在类中使用泛型的例子：
class MyObject<T> {
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<string>[] = [
new MyObject(1, "cat", "false"),
new MyObject(2, "dog", "true"),
];
const newPropertyAddition: MyObject<number | boolean>[] = 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 状态的扩展对象。以下是没有泛型的实现：
const currentlyLoggedIn = (obj: object): object => {
let isOnline = true;
return { ...obj, online: isOnline };
}
const user = currentlyLoggedIn({ name: 'Ben', email: 'ben@mail.com' });
const currentStatus = user.online; // Error: Property 'online' does not exist on type 'object'.
上面的代码会报错，因为 currentlyLoggedIn 函数不知道它接收到的对象类型。我们可以使用泛型来解决这个问题：
const currentlyLoggedIn = <T extends object>(obj: T) => {
let isOnline = true;
return { ...obj, online: isOnline };
}
const user = currentlyLoggedIn({ name: 'Benny barks', email: 'benny@mail.com' });
user.online = false; // No error
在这个例子中，我们用声明了一个泛型参数 T，函数可以处理任何对象类型，并且返回的对象包含 online 属性。
使用泛型接口
我们可以在接口中使用泛型来定义更复杂的数据结构。例如：
interface User<T> {
name: string;
email: string;
online: boolean;
skills: T;
}
const newUser: User<string[]> = {
name: "Benny barks",
email: "ben@mail.com",
online: false,
skills: ["chewing", "barking"],
};
const brandNewUser: User<number[]> = {
name: "Benny barks",
email: "benny@mail.com",
online: false,
skills: [2456234, 243534],
};
在这个例子中，是类型参数，可以在使用接口时替换为任何有效的 TypeScript 类型。
现实世界中的应用：泛型接口 ILogger
下面是一个现实世界中的例子，展示了如何使用泛型接口。我们创建了一个 ILogger 接口，定义了一个log方法，该方法接受消息和任意类型的数据（T）：
interface ILogger<T> {
log(message: string, data: T): void;
}
ILogger 接口可以用于任何数据类型，使我们的代码更适应不同的场景，并确保记录的数据类型正确。
实现 ConsoleLogger 类
首先，我们创建一个实现 ILogger 接口的 ConsoleLogger 类：
class ConsoleLogger implements ILogger<any> {
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<string> {
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<T = number>(arr: Array<T>): Array<T> {
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<T = number, Y = number>(arr: Array<T>, 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<T extends { id: number }> {
petOwner: T[];
constructor(pets: T[]) {
this.petOwner = pets;
}
processPets<X>(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<t，它扩展了包含 id 属性且类型为 number 的对象。该类有一个空数组属性 petOwner，类型为 T，用于存放项目。
MyNewClass 的 processPets 方法接受一个回调函数，该回调函数遍历每个项目并检查定义的条件。whichPet 的返回值将是一个基于回调函数中提供的条件的值数组。我们可以添加条件并定义逻辑，以根据需求和具体情况进行调整。
七 、为泛型添加约束
泛型允许我们处理作为参数传递的任何数据类型。然而，我们可以为泛型添加约束，以将其限制为特定类型。这样可以确保我们不会获取不存在的属性。
添加约束的示例 一个类型参数可以被声明为受限于另一个类型参数。这将帮助我们在对象上添加约束，确保我们不会获取不存在的属性：
function getObjProperty<Type, Key extends keyof Type>(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 barks
console.log(getObjProperty(x, "admin")); // false
console.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<T> {
data: T;
}
class ApiService {
private readonly baseUrl: string;
constructor(baseUrl: string) {
this.baseUrl = baseUrl;
}
public async get<T>(url: string): Promise<ApiResponse<T>> {
const response = await fetch(`${this.baseUrl}${url}`);
const data = await response.json() as T;
return { data };
}
}
在这里，我们定义了一个ApiResponse接口，它表示一个通用的API响应结构。该接口包含一个类型为T的data属性，还可以扩展其他属性（例如，状态、错误信息）。接着，我们创建了一个ApiService类，其中包括一个泛型函数，该函数接受一个URL路径并返回一个Promise<ApiResponse>。该函数从提供的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<Client> {
const response = await apiClient.get<Client>(`/clients/${id}`);
return response.data;
}
async function getProducts(): Promise<Product[]> {
const response = await apiClient.get<Product[]>("/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<T extends number>(value: T): T {
return value * 2;
}
2. 必要时应用约束
使用类型约束（extends关键字）来限制可以与泛型一起使用的类型，确保只接受兼容的类型。
在下面的示例中，定义了一个泛型接口并将其应用为参数约束，因此findById函数只接受实现特定接口的对象：
interface Identifiable<T> {
id: T;
}
function findById<T, U extends Identifiable<T>>(collection: U[], id: T) {
return collection.find(item => item.id === id);
}
3. 利用实用类型
TypeScript 提供了一些实用类型（如Partial、Readonly和Pick<T, K>），以便于常见的数据操作。这些类型可以增强代码的可读性和可维护性。
例如，Partial 创建一个可选属性的类型：
interface User {
id: number;
name: string;
email?: string;
}
// Partial 创建一个可选属性的类型
type UserPartial = Partial<User>;
const userData: UserPartial = { name: "Alice" }; // 只给出部分属性
4. 使用泛型默认值
在某些情况下，可以为泛型参数提供默认值，以减少使用泛型时的复杂性。
interface ApiResponse<T = any> {
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<number> = {}; // Type is not generic
const 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<number> = [1, 2, 3]; // 正确添加类型参数
2. “Cannot Find Name 'T'”
这个错误通常发生在使用未声明或不在作用域内的类型参数（T）时。要解决此问题，请正确声明类型参数或检查其使用中的拼写错误：
// 尝试在未声明类型参数的情况下使用 T 作为泛型类型参数
function getValue(value: T): T { // Cannot find name 'T'.
return value;
}
// 通过声明 T 作为泛型类型参数修复错误
function getValue<T>(value: T): T {
return value;
}
结束
在这篇文章中，我们深入探讨了 TypeScript 泛型的强大功能及其最佳实践。通过具体的示例和详细的解释，我们展示了如何利用泛型创建灵活、可复用且类型安全的代码。泛型不仅能帮助我们减少运行时错误的风险，还能显著提高代码的可维护性和可读性。
希望这篇文章能帮助你更好地理解和应用 TypeScript 中的泛型。如果你在实践中遇到任何问题，或者有任何想法和建议，欢迎在评论区与我们交流讨论！如果你觉得这篇文章对你有所帮助，不妨分享给你的朋友，让更多人受益。
感谢你的阅读，我们下次再见！
腾讯云开发者
