在 React 属性定义中定义复杂的数据结构类型.JS

Question

>我有一个打字稿数据文件，由我的反应组件使用。名为 data.ts 的打字稿数据文件具有以下数据项：

数据的内容

export default {
nodes: [
{ name: 'Myriel', group: 1 },
{ name: 'Napoleon', group: 1 },
{ name: 'Mlle.Baptistine', group: 1 },
],
links: [
{ source: 1, target: 0, value: 1 },
{ source: 2, target: 0, value: 8 },
{ source: 3, target: 0, value: 10 },
],
};

我正在将该数据从另一个组件main.tsx传递给反应组件(graph.tsx(。

main.tsx 的相关内容

import data from "./data";
import Graph from "./Graph";
.
.
.
return <Graph width={width} height={height} data={data} />;

现在在 Graph.tsx 上，props 接口定义如下：

interface IProps {
width: number;
height: number;
data: {
nodes: { name: string; group: number }[];
links: { source: number; target: number; value: number }[];
};
}

现在我想将数据更改为以下格式

在数据2.ts

export default {
root : [
{name: "flare",
children: [{
name: "analytics",
children: [{
name: "cluster",
children: [{
name: "AgglomerativeCluster",
size: 3938
}, {
name: "CommunityStructure",
size: 3812
}, {
name: "HierarchicalCluster",
size: 6714
}, {
name: "MergeEdge",
size: 743
}]
}, {
name: "graph",
children: [{
name: "BetweennessCentrality",
size: 3534
}, {
name: "LinkDistance",
size: 5731
}, {
name: "MaxFlowMinCut",
size: 7840
}, {
name: "ShortestPaths",
size: 5914
}, {
name: "SpanningTree",
size: 3416
}]
}, {
name: "optimization",
children: [{
name: "AspectRatioBanker",
size: 7074
}]
}]
}
]

这就是Graph.tsx中的数据格式将是这样的。

data:{
root: {name:string, children: root}[];
};

根据较旧的数据格式(下图(在 IProps 中编写此内容的正确格式是什么？

data: {
nodes: { name: string; group: number }[];
links: { source: number; target: number; value: number }[];
};

由于它是一个嵌套的数据链，如何在属性定义中定义它？

Answer 1

看起来数据的正确类型声明如下所示。 定义此递归类型别名：

type MyNode = { name: string } & ({ children: MyNode[] } | { size: number });

然后使用：

data: { root: [MyNode] };