Typescript,接口返回的data类型和组件需要的data类型不一致怎么办?

如题。比如使用antd组件库里的Tree组件,他需要我们每个数组项上面都提供key和title值,但是我们后台的数据不可能和他组件库保持一致。。。而且我们传给Tree组件的data如果需要自定义渲染,使用了多余的属性也会报错不存在这个属性。

例如,后台返回的数据类型接口:

interface MyData {
  productName: string;
  id: number;
}

组件里的DataNode是这样的:

export interface DataNode {
    // ......
    // 省略其他可选参数

    key: string | number; // key 为必选参数

}

在我的代码里:

<Tree
  treeData={data}
  titleRender={(
    node: DataNode
  ) => {
    return (
      <div>
        <!--使用(node as MyData).productName会显示类型转换错误,两个类型不能完全覆盖-->
        {node.productName}
      </div>
    )
  }}
></Tree>

虽然使用node: any就不会报错,可是相对的这样也就没有类型检查了

阅读 199
评论
    1 个回答
    • 3.8k

    在接口和组件之间加一层 mapping ,把接口返回的数据处理成 view 层需要的结构呗,非得直接把后端返回的数据喂给 view 吃么?

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章