TypeScript中<IVehicle|IHouse>联合类型访问独有属性报错如何解决？

TypeScript 对于 IVehicle | IHouse 这类联合类型，默认只允许访问所有类型共有的属性（本场景中只有color是两个接口共有的属性），bedrooms仅属于IHouse接口，所以直接访问会触发类型报错。

以下3种常用方案都不需要修改API返回结构即可解决问题：

方案1：用in操作符做即时类型收窄 #

最便捷的轻量处理方式，直接在遍历逻辑中判断独有属性是否存在，TS会自动完成类型收窄：

class MyClass extends Record({
  apiResponse: Array<IVehicle | IHouse>(),
}) {
  // 示例：提取所有IHouse的bedrooms，非IHouse类型可返回默认值或过滤
  getBedroomsList() {
    return this.apiResponse.map(item => {
      if ('bedrooms' in item) {
        // 此处TS会自动识别item为IHouse类型，可正常访问对应属性
        return item.bedrooms
      }
      // 非IHouse类型的处理逻辑，示例为返回null后过滤
      return null
    }).filter(Boolean)
  }
}

方案2：自定义类型守卫（多场景复用时推荐） #

如果项目多处需要判断两类对象类型，可以封装类型守卫函数，逻辑更严谨复用性更高：

// 自定义类型守卫：判断对象是否为IHouse类型
function isHouse(item: IVehicle | IHouse): item is IHouse {
  return 'bedrooms' in item && 'bathrooms' in item
}
// 自定义类型守卫：判断对象是否为IVehicle类型
function isVehicle(item: IVehicle | IHouse): item is IVehicle {
  return 'wheels' in item && 'brand' in item
}

class MyClass extends Record({
  apiResponse: Array<IVehicle | IHouse>(),
}) {
  apiResponse.map(item => {
    if (isHouse(item)) {
      return item.bedrooms
    }
    // 处理车辆类型的逻辑示例
    return item.brand
  })
}

方案3：类型断言（仅当100%确认类型时使用） #

如果你明确知道当前遍历的元素一定是IHouse类型，可以直接用类型断言绕过TS检查，注意该方式没有运行时校验，类型判断错误会引发运行时问题：

class MyClass extends Record({
  apiResponse: Array<IVehicle | IHouse>(),
}) {
  // 直接断言为IHouse类型访问属性
  apiResponse.map((item) => (item as IHouse).bedrooms) 
}

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