TypeScript接口联合类型使用及TS2339错误解决方案问询

这种写法本身是可行的，报错源于TypeScript的严格类型检查机制：当list被定义为IData[] | IData2[]时，遍历得到的每个item类型是IData | IData2。此时直接访问仅存在于某一个接口的属性（比如data1），TypeScript会抛出错误——因为它无法确定当前item一定是拥有该属性的类型。

解决方法有以下几种： #

1. 使用in操作符做类型守卫

通过判断属性是否存在，让TypeScript推断出当前item的具体类型：

interface IData { data1: string }
interface IData2 { data2: string }
const list: IData[] | IData2[] = []

for (const item of list) {
  if ('data1' in item) {
    console.log(item.data1); // 此时item被推断为IData类型
  } else {
    console.log(item.data2); // 此时item被推断为IData2类型
  }
}

2. 给接口添加区分标识（Discriminated Union）

如果可以修改接口定义，给每个接口添加一个唯一的类型标识字段，让TypeScript能更精准地推断类型：

interface IData {
  type: 'data1'; // 唯一标识
  data1: string;
}
interface IData2 {
  type: 'data2'; // 唯一标识
  data2: string;
}
const list: IData[] | IData2[] = [];

for (const item of list) {
  if (item.type === 'data1') {
    console.log(item.data1);
  } else {
    console.log(item.data2);
  }
}

3. 谨慎使用类型断言

如果你能100%确定当前遍历的所有item都是某一类型，可以用类型断言绕过检查，但这种方法会失去TypeScript的类型保护，不推荐在不确定类型的场景使用：

interface IData { data1: string }
interface IData2 { data2: string }
const list: IData[] | IData2[] = []

for (const item of list) {
  console.log((item as IData).data1);
}

内容的提问来源于stack exchange，提问作者NeedH8