使用 TypeScript 实现类型安全的动态分组求和

使用 typescript 实现类型安全的动态分组求和

本文详细介绍了如何使用 TypeScript 创建一个通用的、类型安全的 groupBySum 函数,该函数可以根据任意数量的对象键对对象数组进行分组,并对第二组任意数量的键的值进行求和。该函数避免了硬编码键名,并充分利用 TypeScript 的类型系统,保证了代码的健壮性和可维护性。

类型安全的 groupBySum 函数实现

以下是一个使用 TypeScript 实现的 groupBySum 函数,它满足了所有期望的要求:

/** * 对对象数组中的对象值进行求和,并按任意对象键进行分组。 * * @remarks * 此方法接受并返回一个对象数组。 * 生成的对象数组包含原始数组中对象键的子集。 * * @param arr - 要分组和求和的对象数组。 * @param groupByKeys - 用于分组的键的数组。 * @param sumKeys - 用于求和的键的数组。这些键必须引用数值。 * @returns 一个对象数组,按 groupByKeys 分组,并对 sumKeys 中的键的值进行求和。 */const groupBySum = (  arr: T[],  groupByKeys: K[],  sumKeys: S[]): Pick[] => {  return [    ...arr      .reduce((accu, curr) => {        const keyArr = groupByKeys.map((key) => curr[key]);        const key = keyArr.join("-");        const groupedSum =          accu.get(key) ||          Object.assign(            {},            Object.fromEntries(groupByKeys.map((key) => [key, curr[key]])),            Object.fromEntries(sumKeys.map((key) => [key, key in curr ? curr[key] : 0]))          );        for (let key of sumKeys) {          groupedSum[key] = (groupedSum[key] || 0) + (curr[key] || 0);        }        return accu.set(key, groupedSum);      }, new Map())      .values(),  ];};

此函数接受三个参数:

arr: 要进行分组和求和的对象数组。groupByKeys: 用于分组的键的数组。sumKeys: 用于求和的键的数组。

该函数返回一个新的对象数组,其中包含按 groupByKeys 分组的原始数组中的对象,并且 sumKeys 中的值已被求和。

使用示例

以下是一些使用 JavaScript 等效代码的示例,基于以下 arr 数组:

const arr = [  { shape: "square", color: "red", available: 1, ordered: 1 },  { shape: "square", color: "red", available: 2, ordered: 1 },  { shape: "circle", color: "blue", available: 0, ordered: 3 },  { shape: "square", color: "blue", available: 4, ordered: 4 },];const groupBySum = (arr, groupByKeys, sumKeys) => {  return [    ...arr      .reduce((accu, curr) => {        const keyArr = groupByKeys.map((key) => curr[key]);        const key = keyArr.join("-");        const groupedSum =          accu.get(key) ||          Object.assign(            {},            Object.fromEntries(groupByKeys.map((key) => [key, curr[key]])),            Object.fromEntries(sumKeys.map((key) => [key, 0]))          );        for (let key of sumKeys) {          groupedSum[key] += curr[key];        }        return accu.set(key, groupedSum);      }, new Map())      .values(),  ];};console.log('groupBySum(arr, ["shape"], ["available"])')console.log(groupBySum(arr, ["shape"], ["available"]))console.log('nngroupBySum(arr, ["color"], ["ordered"])')console.log(groupBySum(arr, ["color"], ["ordered"]))console.log('nngroupBySum(arr, ["shape", "color"], ["available", "ordered"])')console.log(groupBySum(arr, ["shape", "color"], ["available", "ordered"]))

这些示例展示了如何使用 groupBySum 函数按不同的键进行分组,并对不同的值进行求和。

类型安全优势

TypeScript 实现是类型安全的。例如,如果我们尝试传递一个无效的键,编译器会报错:

groupBySum(arr, ["blah"], ["ordered"]);

错误信息如下:

Type '"blah"' is not assignable to type '"shape" | "ordered" | "color" | "available"'.ts(2322)

返回的对象也是类型安全的。例如,ans 的类型在以下代码中:

const ans = groupBySum(arr, ["shape"], ["ordered"])

是:

Array;

注意事项

任何未参与转换的键都会被删除。上面的示例不包含 color 或 available,因为它们不可能包含有意义的值。这是内置在返回类型中的,因此 TypeScript 知道不要期望它们。确保 sumKeys 中的键对应的值是数值类型,否则求和结果可能不正确。如果 groupByKeys 中存在重复的键,则会覆盖之前的分组结果。

总结

通过使用 TypeScript 的泛型和类型推断,我们可以创建一个通用的、类型安全的 groupBySum 函数,它可以根据任意数量的对象键对对象数组进行分组,并对第二组任意数量的键的值进行求和。这个函数不仅可以提高代码的可读性和可维护性,还可以避免运行时错误。

以上就是使用 TypeScript 实现类型安全的动态分组求和的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1515851.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 09:38:14
下一篇 2025年12月20日 09:38:24

相关推荐

  • React MongoDB 项目中 ‘map’ 属性未定义的错误排查与解决

    本文旨在帮助开发者解决 React 项目中,从 MongoDB 获取数据后,出现 “TypeError: Cannot read property ‘map’ of undefined” 错误的问题。通过分析错误原因,提供代码示例和详细的解决方案,确保…

    2025年12月20日
    000
  • 基于 Leaflet 的 GeoJSON 图层过滤教程

    本文档旨在指导 Leaflet 用户如何根据 GeoJSON 数据的属性,动态地过滤并显示地图上的图层。通过示例代码,详细讲解如何创建一个过滤函数,并将其与按钮点击事件关联,实现按需显示特定属性的 GeoJSON 图层,提升地图交互性和数据可视化能力。 在 Leaflet 中,经常需要根据 GeoJ…

    2025年12月20日
    000
  • React自定义导航返回需双击问题排查与解决

    本文针对React应用中使用自定义导航时,出现“返回按钮需要点击两次才能生效”的问题,进行了深入分析。通过排查代码逻辑和利用React Strict Mode的特性,定位问题根源在于useEffect的重复执行。文章提供了两种解决方案:一是添加条件判断避免重复执行,二是优化代码逻辑,减少对useEf…

    2025年12月20日
    000
  • React 自定义导航返回需点击两次的解决方案

    本文旨在解决 React 应用中使用自定义导航时,需要点击两次返回按钮才能正确返回上一页的问题。通过分析问题的根源,即 React 的 StrictMode 在开发环境下重复渲染组件,并结合官方文档的建议,提供两种解决方案:一是通过条件判断避免重复执行副作用函数,二是优化代码逻辑,减少对 useEf…

    2025年12月20日
    000
  • 从HTML表单获取用户输入:解决Undefined错误

    本文旨在帮助开发者解决在使用getElementsByClassName方法从HTML表单获取用户输入时遇到的“Undefined”错误。我们将深入探讨该方法的工作原理,并提供两种有效的解决方案,确保能够正确获取表单元素的值,从而顺利实现用户注册等功能。 在使用JavaScript从HTML表单中获…

    2025年12月20日
    000
  • React自定义导航返回需双击问题排查与解决方案

    正如摘要所述,本文旨在解决React应用中使用自定义导航时,需要双击返回按钮才能正确返回上一页的问题。以下将深入分析问题原因并提供解决方案。 问题分析 提供的代码片段展示了一个自定义的React Hook useMyHook,用于管理应用的状态,并将其同步到浏览器的URL和localStorage中…

    2025年12月20日
    000
  • React 自定义导航返回需双击问题排查与解决

    正如摘要所述,本文将深入探讨 React 应用中自定义导航返回需双击的问题,并提供解决方案。 在 React 应用中实现自定义导航时,开发者可能会遇到需要点击两次返回按钮才能正确返回上一页面的问题。这通常与状态管理、URL 更新以及 window.history 的使用方式有关。下面我们将通过一个具…

    2025年12月20日
    000
  • 高频渲染优化:React组件hover事件与性能提升

    本文旨在解决React应用中因频繁hover事件触发组件重渲染导致的性能问题。通过分析mouseOver和mouseEnter事件的区别,并结合React.memo等优化手段,提供了一套提升React应用hover交互性能的有效方案。 在React应用开发中,hover交互是一种常见的用户体验增强手…

    2025年12月20日
    000
  • 检查字符串中特定字符或数字是否存在:JavaScript 方法详解

    本文旨在提供 JavaScript 中检查字符串是否包含特定字符或数字的全面指南。我们将探讨使用 includes() 方法和正则表达式来高效地实现此目标,并提供实际代码示例和注意事项,帮助开发者更好地理解和应用这些技术。 使用 includes() 方法 includes() 方法是 JavaSc…

    2025年12月20日
    000
  • JS如何实现函数式数据结构?纯函数实现

    在javascript中实现函数式数据结构的核心是通过不可变性和纯函数确保每次操作都返回新数据副本而不修改原数据,具体可通过原生方法如map、filter、concat、展开运算符及object.assign实现数组和对象的不可变操作,对于复杂结构可使用类或工厂函数构建自定义不可变数据结构如不可变栈…

    2025年12月20日
    000
  • Leaflet 中 GeoJSON 图层组的动态过滤教程

    本文档旨在提供一种在 Leaflet 地图中动态过滤 GeoJSON 图层组的方法。通过编写 JavaScript 函数,用户可以根据要素属性(如 epoch 和 year)来控制地图上显示的要素。本文将提供详细的代码示例和步骤说明,帮助开发者实现交互式地图过滤功能。 在 Leaflet 地图中,经…

    2025年12月20日
    000
  • Vuex的基本用法是什么

    vuex的核心是集中式状态管理,确保状态变更可预测、可追踪;其基本用法围绕state、mutations、actions和getters展开:1. state定义共享状态数据;2. mutations是唯一修改state的方式,必须为同步函数;3. actions用于提交mutations,可包含异…

    2025年12月20日
    000
  • 利用 Leaflet 实现 GeoJSON 图层按属性过滤显示

    本文将指导你如何在 Leaflet 地图中,针对包含多个 GeoJSON 特征的图层,实现基于属性的动态过滤功能。通过创建一个过滤函数,并将其绑定到按钮点击事件,用户可以根据指定的属性值(例如 epoch 和 year)筛选并显示特定的 GeoJSON 特征,从而实现地图数据的交互式展示。 核心思路…

    2025年12月20日
    000
  • JS单页面应用如何实现

    单页面应用(spa)相比传统多页面应用具有更流畅的用户体验、前后端分离、易于构建移动应用和减少服务器压力等优点,但也存在首屏加载时间长、seo优化困难、复杂性高和依赖javascript等缺点;为解决首屏加载慢的问题,可通过代码分割、懒加载、资源压缩、cdn加速、tree shaking、预渲染和服…

    2025年12月20日
    000
  • js 怎样解密数据

    前端javascript解密数据的核心是使用web crypto api,1. 首先通过crypto.subtle.decrypt()调用支持aes-gcm等算法的解密方法;2. 解密前需将密钥和数据转换为cryptokey和arraybuffer格式;3. 解密后将结果转为可读字符串;4. 密钥管…

    2025年12月20日
    000
  • JS如何实现迭代器模式

    javascript中需要迭代器模式以提供统一遍历接口,解决数据结构多样性与遍历方式统一性的矛盾,通过实现symbol.iterator方法返回具有next()方法的迭代器对象,实现遍历逻辑与集合解耦,支持for…of循环和惰性求值,提升代码模块化与可维护性,推荐使用生成器函数简化实现,…

    2025年12月20日
    000
  • JS如何实现哈希集合?哈希冲突处理

    JavaScript没有原生的哈希集合类型,因为它依赖Object、Map和Set等通用结构来满足不同需求,而Set仅基于引用判断对象唯一性,无法实现基于内容的唯一性;我们通过Map模拟哈希集合,使用链式法处理哈希冲突,将哈希值作为键,桶(数组或Set)存储同哈希值的元素,并自定义_getHashK…

    2025年12月20日
    000
  • js如何实现原型链的寄生继承

    寄生继承是一种在原型继承基础上增强对象并返回新对象的继承方式,1. 它通过创建父类原型的副本并添加constructor属性来实现继承;2. 子类可扩展方法而不影响父类原型;3. 相比组合继承,它避免了两次调用父类构造函数,提升了性能;4. 适用于需定制化继承的场景,如组件或模型扩展;5. 为避免性…

    2025年12月20日 好文分享
    000
  • CommonJS和ES模块有什么区别

    commonjs采用同步加载,es模块采用异步加载;2. commonjs使用require和module.exports,es模块使用import和export;3. commonjs适用于node.js环境,es模块适用于浏览器及现代node.js环境;4. commonjs处理循环依赖时可能获…

    2025年12月20日
    000
  • 一致性哈希是什么?分布式系统中的应用

    一致性哈希通过环形空间和虚拟节点减少节点变动时的数据迁移,解决传统哈希在分布式系统中因节点增减导致大量数据重映射的问题,广泛应用于缓存、分布式数据库等场景。 一致性哈希,简单来说,就是一种特殊的哈希算法,它在分布式系统中用来解决节点动态增减带来的数据迁移问题。核心思想是尽量减少节点变化时需要迁移的数…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信