reduce + TypeScript 写出类型安全的数据转换管道

在 JavaScript 里， reduce 是“万能数组转换器”。 但在大型前端项目中，如果没有类型约束，reduce 很容易变成：

• acc 类型不明
• 返回结构靠猜
• 后期重构痛苦

TypeScript + reduce 的目标只有一个：

让每一次数据转换都有可推导、可检查、可重构的类型保障

这一点，在复杂前端工程里非常关键。

一、最常见的类型坑

很多人写 reduce 时是这样的：

const result = list.reduce((acc, item) => {
  acc[item.id] = item;
  return acc;
}, {});

TS 报错：

Element implicitly has an 'any' type...

因为 {} 的类型是 {} ，不能随便加索引。

二、正确声明累加器类型

对象索引映射

interface Item {
  id: number;
  name: string;
}

const map = list.reduce<Record<number, Item>>((acc, item) => {
  acc[item.id] = item;
  return acc;
}, {});

现在：

• acc 类型明确
• map[123] 有完整 Item 类型提示
• 重构字段名时 TS 会全局校验

这就是 工程级安全性 。

三、分组聚合的类型写法

interface Item {
  type: string;
  count: number;
}

const grouped = list.reduce<Record<string, Item[]>>((acc, item) => {
  (acc[item.type] ||= []).push(item);
  return acc;
}, {});

TS 精确知道：

grouped["A"] -> Item[]

在 Vue computed 或 React useMemo 里直接使用，不需要再做类型断言。

四、统计汇总的类型约束

const totalMap = list.reduce<Record<string, number>>((acc, item) => {
  acc[item.type] = (acc[item.type] || 0) + item.count;
  return acc;
}, {});

图表库（ECharts / Chart.js）接入时能直接拿到 number 类型，不会出现字符串拼接 bug。

五、reduce 返回复杂结构时的接口定义

例如菜单树构建：

interface Node {
  id: number;
  parent: number | null;
  children?: Node[];
}

const tree = list.reduce<Record<number, Node>>((acc, item) => {
  item.children = [];
  acc[item.id] = item;
  if (item.parent !== null) {
    acc[item.parent].children!.push(item);
  }
  return acc;
}, {});

这里 TS 能保证：

• children 一定是 Node[]
• parent 指向合法 id
• 不存在隐式 any

这在后台管理系统里非常常见。

六、写出「可复用 reduce 管道」

在大型项目中，我们通常不会到处手写 reduce，而是封装 数据管道函数 。

例如：

function groupBy<T, K extends PropertyKey>(
  list: T[],
  keyGetter: (item: T) => K
): Record<K, T[]> {
  return list.reduce((acc, item) => {
    const key = keyGetter(item);
    (acc[key] ||= []).push(item);
    return acc;
  }, {} as Record<K, T[]>);
}

使用：

const byType = groupBy(list, item => item.type);

TS 会自动推导：

Record<string, Item[]>

📌 这就是 函数式数据管道 + 完整类型推导 。

七、组合多个 reduce 管道

真实项目经常：

• 先分组
• 再汇总
• 再转成图表结构

可以写成组合函数：

const pipe =
  <T>(...fns: Function[]) =>
  (input: T) =>
    fns.reduce((v, fn) => fn(v), input);

然后：

const buildChartData = pipe(
  (list: Item[]) => groupBy(list, i => i.type),
  (grouped: Record<string, Item[]>) =>
    Object.entries(grouped).map(([k, v]) => ({
      name: k,
      value: v.reduce((s, i) => s + i.count, 0)
    }))
);

const chartData = buildChartData(list);

TS 会完整追踪每一步输入输出类型。

这就是 前端数据转换流水线架构 。

八、React / Vue 中的真实应用

React

const chartData = useMemo(
  () => buildChartData(list),
  [list]
);

类型全程自动推导，组件层零 any。

Vue

const chartData = computed(() => buildChartData(list.value));

配合 Volar / TS Server，模板里直接获得字段提示。

九、为什么这在大型项目里很重要？

因为：

• 后端字段变更 → TS 立刻报错
• 图表结构改动 → 所有下游自动提示
• 重构安全 → 不靠肉眼查找

这正是 大前端工程“可演进架构” 的基础。

十、一句话总结

在 JS 里：

reduce = 万能数组变换工具

在 TS 里：

reduce + 泛型 = 类型安全的数据转换管道

最后

当你能熟练写出：

• 泛型 groupBy
• 类型安全 reduce
• 管道式数据整形

你已经进入：

大型前端项目的数据建模与架构层能力