Angular联合类型对象获取属性报错，如何解决Property 'name'不存在问题？

问题原因 #

Angular模板编译器无法识别instanceof作为类型守卫——即便你在*ngIf里做了判断，TypeScript依然会将planComponent视为PlanComponent | PlanComponentLabel的联合类型，因此不允许直接访问仅存在于PlanComponentLabel上的name属性。

解决方案 #

方法1：自定义类型守卫函数（推荐） #

在组件的.ts文件中定义一个类型谓词函数，明确告诉TypeScript如何区分两种类型：

isPlanComponentLabel(item: PlanComponent | PlanComponentLabel): item is PlanComponentLabel {
  // 可根据实际场景调整判断逻辑，比如检查name属性是否存在，或用instanceof（若为类类型）
  return 'name' in item;
}

随后在模板中调用该函数做判断：

<p *ngIf="isPlanComponentLabel(planComponent)" class='feature_block'>{{planComponent.name}}</p>

这种方式能让TypeScript正确识别类型范围的缩小，彻底消除报错。

方法2：直接检查属性存在性 #

如果确定PlanComponent不会拥有name属性，也可以直接在模板中判断属性是否存在：

<p *ngIf="planComponent.name !== undefined" class='feature_block'>{{planComponent.name}}</p>

注意：若PlanComponent可能存在name但类型不符合预期，这种方法不够严谨，优先选择方法1。

针对类类型的补充说明 #

如果PlanComponentLabel是类而非接口，可在类型守卫函数中直接用instanceof判断：

isPlanComponentLabel(item: PlanComponent | PlanComponentLabel): item is PlanComponentLabel {
  return item instanceof PlanComponentLabel;
}

模板调用方式与方法1一致。

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