如何为自动生成的嵌套TypeScript接口添加UI所需属性？

开发者阿泽

2026-8-5

最优解决方案：递归类型映射+纯数据转换函数

针对你的场景，推荐结合TypeScript的递归类型映射工具和纯数据转换函数，既不修改自动生成的原接口，也避免冗余定义，同时保证类型安全：

1. 用递归类型映射自动生成适配UI的嵌套类型

不用手动编写AForUI、BForUI这类冗余接口，通过TypeScript的类型工具递归将所有嵌套的C类型替换为CForUI：

// 递归替换类型中的C为CForUI，处理嵌套对象和数组
type ReplaceCWithCForUI<T> = 
  T extends C ? CForUI :
  T extends Array<infer U> ? Array<ReplaceCWithCForUI<U>> :
  T extends object ? { [K in keyof T]: ReplaceCWithCForUI<T[K]> } :
  T;

// 自动生成适配UI的A类型
type AForUI = ReplaceCWithCForUI<A>;

这个类型工具会自动遍历原A、B的所有属性，把所有C类型（包括数组里的C）替换成CForUI，完全匹配原结构，不会出现阻抗不匹配问题。

2. 编写纯数据转换函数，不修改原数据

写一个纯函数将API返回的A类型数据转换为AForUI类型，返回新对象而非修改原数据：

function convertToAForUI(rawData: A): AForUI {
  return {
    ...rawData,
    arrayOfB: rawData.arrayOfB.map(b => ({
      ...b,
      arrayOfC: b.arrayOfC.map(c => ({
        ...c,
        // 根据需求生成label，这里示例用name作为label，可自定义逻辑
        label: c.name
      }))
    }))
  };
}

使用时只需在给UI库传数据前调用该函数，原API数据保持不变，也不会修改自动生成的接口定义。