TypeScript实现后端嵌套树形数据转换适配表格组件

需求说明 #

将后端返回的嵌套财务科目数据做结构转换，输出符合树形表格组件要求的入参格式，支持任意层级的父子节点结构，父节点可包含多个子节点，也可为叶子节点（无children）。

原始后端返回结构 #

{
    "displayName": "Income",
    "baseVersionSum": null,
    "comparisonVersionSum": null,
    "variance": null,
    "variancePercent": null,
    "children": [
        {
            "displayName": "4000 Revenue",
            "baseVersionSum": null,
            "comparisonVersionSum": null,
            "variance": null,
            "variancePercent": null,
            "children": [
                {
                    "displayName": "4100 Product 1 Revenue",
                    "baseVersionSum": -1000000,
                    "comparisonVersionSum": 4300000,
                    "variance": -5300000,
                    "variancePercent": -123,
                    "children": []
                }
            ]
        }
    ]
}

目标输出格式 #

{
    "key": "Income",
    "data": {
        "displayName": "Income",
        "baseVersionSum": null,
        "comparisonVersionSum": null,
        "variance": null,
        "variancePercent": null
    },
    "children": [
        {
            "key": "4000 Revenue",
            "data": {
                "displayName": "4000 Revenue",
                "baseVersionSum": null,
                "comparisonVersionSum": null,
                "variance": null,
                "variancePercent": null
            },
            "children": [
                {
                    "key": "4100 Product 1 Revenue",
                    "data": {
                        "displayName": "4100 Product 1 Revenue",
                        "baseVersionSum": -1000000,
                        "comparisonVersionSum": 4300000,
                        "variance": -5300000,
                        "variancePercent": -123
                    },
                    "children": []
                }
            ]
        }
    ]
}

原有实现问题排查 #

之前编写的reduce版本代码存在4个核心问题，导致输出不符合预期：

• 入参类型不匹配：顶层数据是单个节点对象，不是数组，直接调用reduce会触发类型错误
• 递归逻辑无效：递归调用prepareTableValue(node.children)后没有接收返回值，子节点仍使用原始未转换结构
• 字段拼写错误：将baseVersionSum错写为baseBersionSum
• 分支遗漏：没有处理无children的叶子节点场景

正确TypeScript实现 #

// 原始后端节点类型定义
interface OriginalNode {
  displayName: string;
  baseVersionSum: number | null;
  comparisonVersionSum: number | null;
  variance: number | null;
  variancePercent: number | null;
  children: OriginalNode[];
}

// 转换后表格节点类型定义
interface TableNode {
  key: string;
  data: Omit<OriginalNode, 'children'>;
  children: TableNode[];
}

/**
 * 递归转换树形数据结构，适配表格组件入参
 * @param node 后端返回的单个原始节点
 * @returns 转换后的表格节点
 */
const prepareTableValue = (node: OriginalNode): TableNode => {
  // 解构分离children和其他业务字段
  const { children, ...baseData } = node;
  return {
    key: node.displayName,
    data: baseData,
    // 递归处理所有子节点
    children: children.map(child => prepareTableValue(child))
  };
};

使用方式 #

直接传入后端返回的根节点对象即可：

// rawData为后端接口返回的原始数据
const tableData = prepareTableValue(rawData);

内容的提问来源于stack exchange，提问作者stratdev