在typescript中递归地更新嵌套对象中的值

Question

我们需要在typescript中使用递归来更新嵌套对象中的对象。需要为嵌套对象中的对象添加额外的属性。嵌套会随着时间的推移而改变，因此只能使用递归下面是输入数据:

[
{
"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-生成预期的数据结构，并在底层调用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 })

游乐场