本文探讨了在 TypeScript 中如何为数组类型的自定义数据结构添加自定义查询函数，以提高代码的可读性和复用性。通过结合 TypeScript 的类型交叉（Intersection Types）和 JavaScript 的 `Object.assign()` 方法，我们能够将自定义方法（如 `findById` 和 `findByName`）直接附加到数组实例上，从而实现更直观的数据访问模式。文章详细介绍了实现步骤、关键类型定义以及对 `find` 方法可能返回 `undefined` 的处理策略，旨在提供一种专业且实用的扩展数组功能的方法。
引言：自定义数据查询的痛点
在 TypeScript 项目中，我们经常会遇到需要对特定数据结构（例如对象数组）进行频繁查询的场景。例如，一个包含 id 和 name 属性的对象数组，我们可能需要反复使用 Array.prototype.find() 方法来根据 id 或 name 查找特定元素。这种重复性的查询逻辑不仅会降低代码的可读性，也增加了未来维护的复杂性。
type A = {
id: number;
name: string;
};
const data: A[] = [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
];
// 频繁重复的查询逻辑
const foundById = data.find((entry) => entry.id === 1);
const foundByName = data.find((entry) => entry.name === 'Foo');
console.log(foundById?.name);
console.log(foundByName?.id);为了解决这一问题，我们希望能够像调用对象方法一样，直接在 data 数组实例上调用 findById(id: number) 或 findByName(name: string) 等自定义函数，从而简化查询操作并提升代码的封装性。
解决方案：类型交叉与 Object.assign()
TypeScript 提供了强大的类型系统，结合 JavaScript 的运行时特性，我们可以优雅地实现这一目标。核心思路是利用 TypeScript 的类型交叉（Intersection Types）来定义一个既是数组又包含自定义方法的类型，然后使用 JavaScript 的 Object.assign() 方法在运行时将这些方法附加到数组实例上。
1. 定义基础数据类型
首先，定义数组中每个元素的基础类型：
type A = {
id: number;
name: string;
};2. 定义包含自定义方法的扩展类型
接下来，我们定义一个类型，它既是 A[] 类型，又额外包含我们希望添加的自定义方法。这里使用类型交叉 &：
type ExtendedAArray = A[] & {
findById: (id: number) => A | undefined;
findByName: (name: string) => A | undefined;
};在这个 ExtendedAArray 类型中，我们明确了 findById 和 findByName 方法的签名。需要注意的是，Array.prototype.find() 方法在找不到匹配元素时会返回 undefined，因此我们的自定义方法也应体现这一行为，将返回类型定义为 A | undefined。
3. 使用 Object.assign() 附加方法
现在，我们将实际的数组数据和自定义方法结合起来。Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象。在这里，我们的目标对象是数组本身，源对象则是包含自定义方法的字面量对象。
const data: ExtendedAArray = Object.assign(
[
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
],
{
findById: (id: number) => data.find((a) => id === a.id),
findByName: (name: string) => data.find((a) => name === a.name),
}
);关键点解释：
支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图
- Object.assign([ ... ], { ... }): Object.assign() 的第一个参数是目标对象。在这里，我们传入一个数组字面量 [ { id: 1, name: 'Foo' }, ... ] 作为目标对象。第二个参数是一个包含我们自定义方法的对象 { findById: ..., findByName: ... }。Object.assign() 会将第二个对象的所有可枚举属性复制到第一个对象上。
- 方法内部引用 data: 在 findById 和 findByName 方法的实现中，我们直接引用了外部的 data 变量。这是因为 data 变量本身就是我们正在扩展的数组实例。这种闭包捕获的方式确保了方法能够正确地操作其所属的数据。
4. 使用扩展后的数组
完成上述定义后，我们就可以像预期那样直接在 data 实例上调用自定义方法了：
console.log(data.findById(1)?.name); // 输出: Foo
console.log(data.findByName('Foo')?.id); // 输出: 1
// 查找不存在的元素，将返回 undefined
console.log(data.findById(3)); // 输出: undefined注意事项：处理 undefined
由于 Array.prototype.find() 可能会返回 undefined，因此在访问查询结果的属性时，务必使用可选链操作符 (?.) 或进行显式的 undefined 检查，以避免运行时错误。
const item = data.findById(3);
if (item) {
console.log(item.name);
} else {
console.log('Item not found.');
}如果业务逻辑要求在找不到元素时抛出异常而不是返回 undefined，可以修改方法的实现：
// ...
findById: (id: number) => {
const result = data.find((a) => id === a.id);
if (!result) {
throw new Error(`Item with id ${id} not found.`);
}
return result;
},
// ...在这种情况下，方法的返回类型也应相应地修改为 A 而不是 A | undefined。
总结与最佳实践
通过结合 TypeScript 的类型交叉和 Object.assign()，我们成功地为数组类型的自定义数据结构扩展了自定义查询函数。这种方法带来了以下优势：
- 代码可读性提升： 将复杂的查询逻辑封装成语义化的方法，使代码意图更清晰。
- 代码复用性增强： 避免了在多处重复编写相同的 find 逻辑。
- 类型安全： TypeScript 确保了方法的正确调用和返回值的类型推断。
进一步思考：
- 封装性： 如果需要更复杂的行为或状态管理，可以考虑创建一个包装类（Wrapper Class）来封装数组和相关方法，提供更面向对象的解决方案。
- 性能： 对于非常大的数据集和频繁的查询，可以考虑在自定义方法中引入更优化的查找算法（例如哈希映射），但这会增加实现的复杂性。
- 不变性： Object.assign() 会修改目标对象。在上述示例中，我们是创建了一个新的数组实例并对其进行扩展。如果需要对现有数组进行扩展，需要注意这会改变原数组的引用。
这种扩展自定义类型数组的方法为 TypeScript 开发者提供了一种灵活且类型安全的方式，以构建更具表达力和可维护性的数据操作接口。
