Angular模板类型检查：联合类型属性的模板判断方法求助

问题背景 #

启用strictTemplates等严格编译选项后，Angular 14模板无法对包含多类型的联合对象进行自动类型收窄。即便用if语句检查属性存在，VSCode仍会报错；TypeScript中可用if ('property' in myObj)判断，但模板不支持该逻辑，且无法修改现有数据结构添加kind标识属性。

可行解决方案 #

1. 组件类中定义类型守卫方法 #

这是最推荐的方案，通过TypeScript类型守卫函数为模板提供明确的类型判断逻辑：

// 组件类中定义类型守卫
isFoo(obj: FOO | BAR): obj is FOO {
  return 'fooProp' in obj;
}

在模板中调用该方法实现类型收窄：

<div *ngIf="isFoo(myObj)">
  {{ myObj.fooProp }} <!-- 此处类型已被正确识别为FOO -->
</div>
<div *ngIf="!isFoo(myObj)">
  {{ myObj.barProp }} <!-- 此处类型已被正确识别为BAR -->
</div>

Angular模板类型检查器会识别类型守卫的返回值，自动收窄上下文类型。

2. 使用$any()临时绕过类型检查（不推荐） #

若需快速临时解决，可使用Angular内置的$any()断言关闭单个属性的类型检查，但会失去严格类型的保护：

<div *ngIf="myObj.fooProp">
  {{ $any(myObj).fooProp }}
</div>

注意：此方法仅适合应急，长期使用可能隐藏类型错误。

3. 结合NgTemplateOutlet拆分渲染逻辑 #

针对复杂模板，可将不同类型的渲染逻辑拆分到独立模板中，通过类型守卫切换：

<ng-template #fooTemplate let-item>
  <p>{{ item.fooProp }}</p>
</ng-template>
<ng-template #barTemplate let-item>
  <p>{{ item.barProp }}</p>
</ng-template>

<ng-container 
  *ngIf="isFoo(myObj); then fooTemplate else barTemplate"
  [ngTemplateOutletContext]="{ $implicit: myObj }"
></ng-container>

这种方式更易维护，同时保持类型安全。

补充说明 #

Angular模板类型检查器对in操作符的类型收窄支持有限，严格模式下无法直接通过模板表达式完成联合类型的类型判断，因此需要借助组件类的类型守卫来实现精确的类型收窄。

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