TypeScript中为自定义类型数组添加扩展函数：一种实用方法

本文探讨了在typescript中如何为包含自定义类型对象的数组实例添加自定义查找函数，以简化重复的数据访问操作。通过结合使用object.assign()和typescript的交叉类型，我们可以优雅地扩展数组的功能，同时详细讨论了处理find方法可能返回undefined的情况，并提供了实用的代码示例和注意事项。

引言

在TypeScript项目中，我们经常会遇到需要对特定数据结构数组进行频繁查找的场景。例如，一个包含用户对象或产品对象的数组，我们可能需要根据ID、名称或其他属性来检索特定项。传统的做法是反复使用 Array.prototype.find() 方法，但这会导致代码重复且不够优雅，尤其是在多个地方执行相同的查找逻辑时。

传统查找方式及其局限性

考虑以下自定义类型 A 及其数组 data：

export type A = {
  id: number; // 假设ID为数字类型
  name: string;
};

export const data: A[] = [
  { id: 1, name: 'Foo' },
  { id: 2, name: 'Bar' },
  // ... 更多数据
];

当我们需要根据 id 或 name 查找数据时，通常会这样写：

const targetId = 1;
const foundById = data.find((entry) => entry.id === targetId);
console.log(foundById?.name); // 使用可选链处理 undefined

const targetName = 'Foo';
const foundByName = data.find((entry) => entry.name === targetName);
console.log(foundByName?.id); // 使用可选链处理 undefined

这种模式在代码中多次出现时，不仅增加了冗余，也使得代码维护性降低。理想情况下，我们希望能够直接在 data 数组实例上调用 data.findById(1) 或 data.findByName('Foo') 这样的方法，从而使代码更具表现力和可读性。

扩展数组实例的解决方案

TypeScript 结合 JavaScript 的 Object.assign() 方法，可以实现为数组实例动态添加自定义函数。其核心思想是将一个数组对象与一个包含自定义方法的普通对象合并。同时，利用 TypeScript 的交叉类型（Intersection Types），我们可以精确地描述这种合并后的新类型，确保类型安全。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

type A = {
  id: number;
  name: string;
};

// 定义扩展后的数组类型
// 这是一个交叉类型，表示一个 A[] 数组，同时拥有 findById 和 findByName 方法
type ExtendedAArray = A[] & {
  findById: (id: number) => A | undefined;
  findByName: (name: string) => A | undefined;
};

const initialData: A[] = [
  { id: 1, name: 'Foo' },
  { id: 2, name: 'Bar' },
  { id: 3, name: 'Baz' },
];

// 使用 Object.assign 将自定义方法添加到 initialData 数组实例上
const data: ExtendedAArray = Object.assign(initialData, {
  findById: (id: number) => initialData.find(a => id === a.id),
  findByName: (name: string) => initialData.find(a => name === a.name),
});

// 现在可以直接调用自定义方法
console.log(data.findById(1)?.name); // 输出: Foo
console.log(data.findByName('Foo')?.id); // 输出: 1

// 查找不存在的项
console.log(data.findById(4)); // 输出: undefined

代码解析

1. type A: 定义了数组元素的结构，即每个对象包含 id 和 name 属性。
2. type ExtendedAArray: 这是实现功能的核心类型定义。它是一个交叉类型，表示 A[]（一个 A 类型的数组）与一个包含 findById 和 findByName 方法的对象类型的结合。
   • findById: (id: number) => A | undefined: 定义了一个接受 number 类型 id 参数并返回 A 类型或 undefined 的函数签名。
   • findByName: (name: string) => A | undefined: 定义了一个接受 string 类型 name 参数并返回 A 类型或 undefined 的函数签名。
3. Object.assign(initialData, { ... }):
   • Object.assign() 方法用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象。它返回目标对象。
   • 在这里，initialData 是目标对象（一个 A 类型的数组），第二个参数是一个源对象，包含了我们想要添加的 findById 和 findByName 方法。
   • initialData.find(...)：在自定义方法内部，我们仍然使用原始的 initialData 数组来执行查找操作。这是关键，因为 Object.assign 只是将方法添加到 initialData 实例上，这些方法需要引用实际的数据源。

处理 undefined 返回值

Array.prototype.find() 方法在找不到匹配项时会返回 undefined。因此，我们自定义的 findById 和 findByName 方法也必须声明其返回类型为 A | undefined。在调用这些方法后，务必使用可选链操作符 (?.) 或进行显式的 null/undefined 检查，以避免运行时错误：

const result = data.findById(1);
if (result) {
  console.log(result.name); // 确保 result 不为 undefined
} else {
  console.log('未找到对应数据');
}

// 或者更简洁地使用可选链
console.log(data.findById(1)?.name); // 如果 findById 返回 undefined，则整个表达式为 undefined

根据业务需求，您也可以选择在找不到数据时抛出异常，而不是返回 undefined。这种方式会改变函数的行为，需要在使用时进行 try...catch 处理，因此需要根据具体场景谨慎选择。

注意事项

1. 方法内部的 this 上下文: 在本例中，自定义方法直接引用了外部的 initialData 变量。如果这些方法需要访问数组实例自身的属性（例如，如果 data 是一个类的属性），则需要注意 this 的绑定。使用箭头函数可以确保 this 词法绑定到定义时的上下文。
2. 性能考量: 这种方法为每个数组实例添加了方法。如果您的应用中存在大量此类数组实例，并且每个实例都需要这些扩展方法，这可能会略微增加内存开销。但对于大多数常见场景，这种开销可以忽略不计。
3. 不变性: Object.assign 会修改目标对象（即 initialData）。如果 initialData 是一个不希望被修改的常量，您可能需要先创建一个副本再进行 assign 操作，例如 Object.assign([...initialData], { ... })。
4. 替代方案:
   • 包装类/函数: 如果查找逻辑变得复杂，或者需要在多个不同的数组类型上复用这些功能，可以考虑创建一个包装类或一个工厂函数，将数组作为参数传入并返回一个包含这些方法的对象。这可以提供更强的封装性和可复用性。
   • 实用工具函数: 对于简单的查找，也可以直接创建独立的工具函数，例如 findAById(arr: A[], id: number)，但这又回到了需要传入数组的模式，失去了直接在数组实例上调用方法的便利性。

总结

通过利用 Object.assign() 和 TypeScript 的交叉类型，我们可以有效地为自定义类型数组的实例添加扩展方法，从而提升代码的可读性和维护性，避免重复的 find 调用。在实现过程中，正确处理 find 方法可能返回 undefined 的情况至关重要。这种模式提供了一种灵活且类型安全的方式来增强 JavaScript/TypeScript 中数组的功能，使数据访问代码更加简洁和富有表现力。

以上就是TypeScript中为自定义类型数组添加扩展函数：一种实用方法的详细内容，更多请关注php中文网其它相关文章！