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

Question

如题。比如使用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就不会报错，可是相对的这样也就没有类型检查了

Answer 1

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