在打字稿中递归更新嵌套对象中的值

Question

我们需要在打字稿中使用递归更新嵌套对象中的对象。需要向嵌套对象中的对象添加额外的属性。 嵌套会随着时间的推移而改变，因此递归只会起作用 下面是输入数据：

[
  {
    "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"
      }
    ]
  }
]

尝试了几种方法，但无法找到方法。 如果有任何快速方法可以找到此问题的解决方案，那将是非常有帮助的。 下面的方法有效，但不确定它是否正确。

          formatData(columns: any) {     
            columns.forEach((i: any,index) => {
              if (i.hasOwnProperty('children')) {       
                this.formatData(i.children);
              } else {       
                columns[index] = {...{ field : i.field, headerName: 
                i.field, sortable: true, hide: false }};                    
              }      
            });            
          } 
           

Answer 1

首先，我们需要定义数据结构的类型：

type WithChildren = {
  headerName: string,
  children: DataStructure[]
}

type WithoutChildrenInput = {
  field: string,
}


type WithoutChildrenOutput = {
  field: string,
} & Pick<WithChildren, 'headerName'>

type DataStructure = WithChildren | WithoutChildrenInput

type DataStructureOutput = WithChildren | WithoutChildrenOutput

然后我们可以定义我们的逻辑：

const fieldOutput = (
  field: string,
  headerName: string
) => ({
  field,
  headerName,
  visible: true,
  width: 200,
})

const childrenOutput = (headerName: string, children: DataStructure[]) => (
  { headerName, children: builder(children, headerName) }
)

const withChildren = <Obj, Prop extends string>(obj: DataStructure)
  : obj is WithChildren =>
  Object.prototype.hasOwnProperty.call(obj, 'children');

const builder = (data: DataStructure[], headerName = ''): DataStructureOutput[] =>
  data.reduce<DataStructureOutput[]>((acc, elem) =>
    withChildren(elem)
      ? [...acc, childrenOutput(elem.headerName, elem.children)]
      : [...acc, fieldOutput(elem.field, headerName)], [])

const result = builder(data)

我创建了两个助手： childrenOutput和fieldOutput 。

fieldOutput - 只是创建一个字段实体的普通对象。 没什么特别的

childrenOutput - 生成带有子项的预期数据结构，并在 hood builder函数下调用。

withChildren - 是用户定义的 typeguard ，有助于缩小类型

您可能认为在定义函数之前调用函数是一种不好的做法。 您可以使用function关键字声明builder或将第三个参数传递给childrenOutput如下所示：

const childrenOutput = (headerName: string, children: DataStructure[], callback: (data: DataStructure[], headerName: string) => DataStructureOutput[]) => (
  { headerName, children: builder(children, headerName) }
)

它是由你决定。

全码：

type WithChildren = {
  headerName: string,
  children: DataStructure[]
}

type WithoutChildrenInput = {
  field: string,
}


type WithoutChildrenOutput = {
  field: string,
} & Pick<WithChildren, 'headerName'>

type DataStructure = WithChildren | WithoutChildrenInput

type DataStructureOutput = WithChildren | WithoutChildrenOutput

const data: DataStructure[] = [
  {
    "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"
      }
    ]
  }
]

const fieldOutput = (
  field: string,
  headerName: string
) => ({
  field,
  headerName,
  visible: true,
  width: 200,
})

const childrenOutput = (headerName: string, children: DataStructure[], callback: (data: DataStructure[], headerName: string) => DataStructureOutput[]) => (
  { headerName, children: builder(children, headerName) }
)

const withChildren = <Obj, Prop extends string>(obj: DataStructure)
  : obj is WithChildren =>
  Object.prototype.hasOwnProperty.call(obj, 'children');

const builder = (data: DataStructure[], headerName = ''): DataStructureOutput[] =>
  data.reduce<DataStructureOutput[]>((acc, elem) =>
    withChildren(elem)
      ? [...acc, childrenOutput(elem.headerName, elem.children, builder)]
      : [...acc, fieldOutput(elem.field, headerName)], [])

const result = builder(data)

console.log({ result })

操场