TypeScript嵌套对象使用联合类型出现属性不存在报错如何解决

问题本质 #

你遇到的报错是TypeScript联合类型的默认校验规则导致的：对于Bird | Fish这类联合类型，默认仅允许访问所有类型成员共有的属性，swim是Fish独有的属性，因此直接访问时会触发类型校验失败。

解决方案 #

1. 类型守卫（最安全的原生方案）

基于你接口中共有formLabel字段，先编写类型守卫函数，运行时判断实际类型，TypeScript会自动完成类型收窄：

// 类型守卫函数，返回值为类型谓词，告知TS判断逻辑对应的类型
function isFish(metadata: Bird | Fish): metadata is Fish {
  return metadata.formLabel === 'fishForm';
}
function isBird(metadata: Bird | Fish): metadata is Bird {
  return metadata.formLabel === 'birdForm';
}

子组件中使用示例：

ngOnInit() {
  if (isFish(this.detail.metadata)) {
    // 此代码块内TS会自动识别metadata为Fish类型，无需额外断言
    this.detail.metadata.swim = 'yes';
  }
}

该方案同时具备运行时校验能力，哪怕父组件传错类型也能提前拦截问题，类型安全度最高。

2. 可辨识联合（从接口定义层优化）

你可以直接把Animal改造为可辨识联合类型，从根源降低类型校验成本：

interface BaseAnimal {
  id: number;
  code: string;
}
interface FishAnimal extends BaseAnimal {
  metadata: Fish
}
interface BirdAnimal extends BaseAnimal {
  metadata: Bird
}
// 最终Animal类型为两种类型的联合
type Animal = FishAnimal | BirdAnimal;

改造后子组件的入参可以直接限定为对应类型，无需额外判断：

// 鱼组件的入参直接定义为FishAnimal
@Input() detail: FishAnimal;

ngOnInit() {
  this.detail.metadata.swim = 'yes'; // 无任何类型报错
}

3. 类型断言（临时快速方案）

你提到的this.detail.metadata as Fish方案是可行的，但仅适用于你100%确定当前子组件接收的metadata一定是Fish类型的场景。缺点是没有运行时校验，如果父组件传错类型，运行时会出现访问不存在属性的异常，类型安全度较低。

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