Angular模板中如何访问Item接口子类型MagicItem的独有属性

问题原因分析 #

• typeof(item) === 'MagicItem'无法生效：TypeScript 接口属于编译期类型，运行时会被完全擦除，typeof仅能识别 JavaScript 原生基础类型，永远不会返回'MagicItem'这个值。
• 模板内直接写(item as MagicItem).abilities无法生效：低版本 Angular 不支持模板内的类型断言语法，且直接断言无法自动完成类型收窄，每次访问属性都需要重复断言。

解决方案 #

方案1：使用类型守卫（最推荐，兼容全版本、保留类型校验） #

首先在你的组件类中定义类型守卫方法，通过判断独有属性的存在性完成类型收窄：

// 组件类中新增方法
isMagicItem(item: Item): item is MagicItem {
  // 检查子类型独有的abilities属性是否存在即可完成类型校验
  return 'abilities' in item;
}

之后在模板中配合*ngIf使用，守卫生效后Angular会自动将当前作用域下的item类型收窄为MagicItem，直接访问属性不会报错：

<ng-container *ngIf="isMagicItem(item)">
  <!-- 此处item自动识别为MagicItem类型 -->
  <span *ngFor="let ability of item.abilities">{{ ability }}</span>
</ng-container>

如果有其他继承自Item的子接口，只需要对应新增各自的类型守卫方法即可，比如判断WeaponItem的独有属性damage是否存在。

方案2：使用$any临时跳过类型检查（应急方案） #

如果不需要严格类型校验，只是想快速消除告警，可以使用Angular内置的$any方法临时关闭该表达式的类型检查：

<div *ngFor="let ability of $any(item).abilities">{{ ability }}</div>

该方案的缺点是会丢失类型校验，写错属性名也不会收到编译告警，不建议长期使用。

方案3：模板内类型断言（Angular 14+版本可用） #

高版本Angular已经支持模板内的as类型断言语法，可以直接在表达式中使用：

<div *ngFor="let ability of (item as MagicItem).abilities">{{ ability }}</div>

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