如何在TypeScript接口中使用两种复杂数据类型的联合类型？

哈哈，这种对接有“小bug”的API场景太常见了！返回的数据结构突然变样，既要兼容两种格式又不想放弃TypeScript的类型检查，其实用联合类型完全能搞定，而且还能让代码更清爽。

首先我建议你先把那两种复杂的子类型单独抽成独立接口，别直接写在联合里，不然代码堆在一起看着头疼：

// 先把两种不同的结构拆成独立接口
interface ApiResponseType1 {
  subPropA: {
    prop2: string;
  };
}

interface ApiResponseType2 {
  prop2: string;
}

// 然后在主接口里用联合类型组合它们
export interface MyObject {
  prop1: ApiResponseType1 | ApiResponseType2;
}

这样定义完，TypeScript就明白prop1可能是这两种类型中的任意一种了。不过接下来用的时候得注意，直接访问prop2会报错，因为TS不确定当前是哪种类型——这时候就得用类型守卫来帮TS“识别”类型：

最简单的就是用in操作符判断属性是否存在：

function processProp1(prop: ApiResponseType1 | ApiResponseType2) {
  if ('subPropA' in prop) {
    // 到这里TS就确定这是ApiResponseType1了
    console.log(prop.subPropA.prop2);
  } else {
    // 这里自然就是ApiResponseType2啦
    console.log(prop.prop2);
  }
}

如果API返回的结构里有更明确的区分字段（比如有的返回里带个type: 'nested'，有的是type: 'flat'），那用字面量类型守卫会更靠谱：

// 给每个类型加个标识字段
interface ApiResponseType1 {
  type: 'nested';
  subPropA: {
    prop2: string;
  };
}

interface ApiResponseType2 {
  type: 'flat';
  prop2: string;
}

function processProp1(prop: ApiResponseType1 | ApiResponseType2) {
  if (prop.type === 'nested') {
    console.log(prop.subPropA.prop2);
  } else {
    console.log(prop.prop2);
  }
}

这样处理之后，既能严格定义接口类型，又能在使用时避免类型报错，完美适配你遇到的API返回异常的情况~

内容来源于stack exchange