TS）如何格式化数组以匹配外部组件的类型/接口？

Question

所以我在 react 中使用了一个树视图库，它采用一个内置类型 NodeModule [] 的数组。 我给树组件的数组正在以不同格式（具有不同的键名）的另一个组件中使用。 我如下更改了数据（参见“thirdTreeData”），使其对象具有与 NodeModule[] 相同的键名。 但我收到一个错误：

'{ id: number;类型的参数家长：号码 | 无效的; 文本：字符串； }[] | undefined'不可分配给 'NodeModel[] 类型的参数| (() => 节点模型 [])'。

NodeModule[] 的样子：

export declare type NodeModel<T = unknown> = {
 id: number | string;
 parent: number | string;
 text: string;
 };

我如何将其更改为与 NodeModule [] 类型匹配。 （我将 parent_id 重命名为 parent 并将名称重命名为 text）

const thirdTreeData = secondTreeData?.map(tree => {
return { id: tree.id, parent: tree.parent_id,  text: tree.name };
 });

这是我悬停在thirdTreeData上时看到的，

const thirdTreeData: {
id: number;
parent: number | null;
text: string;
 }[] | undefined

(*secondTreeData 的类型是 - const secondTreeData: ITree[] | undefined)

如何将其类型转换为 NodeModule[] 以便可以将 thirdTreeData 成功传递到树组件中，如下所示？

const [treeData, setTreeData] = useState<NodeModel[]>(thirdTreeData);

我得到上面的错误。

我试过的：我试过把：NodeModule[]放在thirdTreeData前面，但这没有用:(

 const thirdTreeData :NodeModule[] = secondTreeData?.map(tree => 

我是打字稿的新手，所以提前非常感谢你

Answer 1

好吧，我想我想通了.. 为了满足NodeModel[]的类型，我必须传入|| 0 || 0代表 'parent' ，因此当tree.parent_id为null时它变成一个数字。

另外为了确保thirdTreeData不采用“未定义”，当secondTreeData未定义时，我使用三元组传入一个空数组！

const thirdTreeData: NodeModel[] = secondTreeData
? secondTreeData.map(tree => {
  return { id: tree.id, parent: tree.parent_id || 0,  text: tree.name };
  })
: [];

Answer 2

错误消息说thirdTreeData不满足NodeModel类型，因此您可以通过说parent属性应该是number或null并且id是NodeModel类型中的number来简单地解决这个问题，如下代码片段：：

 export declare type NodeModel<T = unknown> = {
     id: number; // <-- id should be a number
     parent: number | null; // <-- parent number or null
     text: string;
 };

treeData状态泛型应该是NodeModel[]或undefined ：

const [treeData, setTreeData] = useState<NodeModel[] | undefined>(thirdTreeData);

希望有效。