TypeScript如何递归更新嵌套对象并为叶子节点添加额外属性

需求说明 #

需要使用TypeScript递归处理动态层级的嵌套对象，为嵌套结构中的叶子节点添加指定额外属性，同时按照父级层级拼接叶子节点的headerName字段。

输入数据示例 #

[
  {
    "headerName": "Group 1",
    "children": [
      {
        "field": "G1-C1"
      },
      {
        "field": "G1-C2"
      }
    ]
  },
  {
    "headerName": "Group 2",
    "children": [
      {
        "headerName": "G2 - C1",
        "children": [
          {
            "field": "G2 - C1-C1"
          },
          {
            "field": "G2 - C1-C2"
          }
        ]
      },
      {
        "field": "G2-C2"
      },
      {
        "field": "G2-C3"
      }
    ]
  },
  {
    "headerName": "Group3",
    "children": [
      {
        "field": "G3-C1"
      },
      {
        "field": "G3-C2"
      }
    ]
  }
]

目标输出格式 #

[
  {
    "headerName": "Group 1",
    "children": [
      {
        "field": "G1-C1",
        "visible": true,
        "width": 200,
        "headerName": "Group1"
      },
      {
        "field": "G1-C2",
        "visible": true,
        "width": 200,
        "headerName": "Group1"
      }
    ]
  },
  {
    "headerName": "Group 2",
    "children": [
      {
        "headerName": "G2 - C1",
        "children": [
          {
            "field": "G2 - C1-C1",
            "width": 200,
            "headerName": "Group2-C1"
          },
          {
            "field": "G2 - C1-C2",
            "width": 200,
            "headerName": "Group2-C1"
          }
        ]
      },
      {
        "field": "G2-C2",
        "width": 200,
        "headerName": "Group2"
      },
      {
        "field": "G2-C3",
        "width": 200,
        "headerName": "Group2"
      }
    ]
  },
  {
    "headerName": "Group3",
    "children": [
      {
        "field": "G3-C1",
        "width": 200,
        "headerName": "Group3"
      },
      {
        "field": "G3-C2",
        "width": 200,
        "headerName": "Group3"
      }
    ]
  }
]

原有代码问题 #

你提供的现有实现存在以下问题：

• 没有传递父级headerName的拼接规则，叶子节点的headerName直接赋值为field值，和要求的父级层级拼接结果不符
• 没有添加示例要求的visible、width属性，反而增加了示例中不存在的sortable、hide字段
• 直接修改原数组元素，存在污染原数据的副作用

正确实现代码 #

首先定义类型约束：

type Column = {
  headerName?: string;
  field?: string;
  children?: Column[];
  visible?: boolean;
  width?: number;
}

递归处理函数：

function formatColumns(columns: Column[], parentHeader = ''): Column[] {
  return columns.map(col => {
    // 分组节点：存在children，递归处理子节点，拼接当前层级header作为子节点前缀
    if (col.children && col.children.length > 0) {
      const currentHeader = col.headerName?.replace(/\s/g, '') || '';
      const childPrefix = parentHeader ? `${parentHeader}-${currentHeader}` : currentHeader;
      return {
        ...col,
        children: formatColumns(col.children, childPrefix)
      }
    }
    // 叶子节点：添加指定属性
    return {
      ...col,
      visible: true,
      width: 200,
      headerName: parentHeader
    }
  })
}

使用方式：

const processedColumns = formatColumns(原始列数据数组);

该实现返回新的数组对象，不会修改原输入数据，支持任意层级的嵌套结构。

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