Angular中判断联合类型TypeComp实例类型的最佳方法

针对你的场景，不需要给Type1和Type2添加额外区分属性，以下几种方法可以在模板中安全区分联合类型并访问专属属性：

方法一：组件定义类型守卫函数（推荐） #

在some.component.ts中定义类型守卫，让TypeScript能在模板中推断具体类型：

import { Type1, Type2, TypeComp } from './your-types-path';

// 组件类内部
isType1(data: TypeComp): data is Type1 {
  // 通过检查Type1独有的属性判断类型
  return (data as Type1).propAFromType1 !== undefined;
}

isType2(data: TypeComp): data is Type2 {
  // 通过检查Type2独有的属性判断类型
  return (data as Type2).propBFromType2 !== undefined;
}

然后在模板中使用*ngIf调用类型守卫，安全访问属性：

<div *ngIf="(selectedData$ | async) as selectedData">
  <div *ngIf="isType1(selectedData)">
    Type1专属属性：{{ selectedData.propAFromType1 }}
  </div>
  <div *ngIf="isType2(selectedData)">
    Type2专属属性：{{ selectedData.propBFromType2 }}
  </div>
</div>

方法二：模板直接检查属性存在（简单场景适用） #

如果Type1和Type2的专属属性完全不重叠，可以直接在模板中检查属性是否存在：

<div *ngIf="(selectedData$ | async) as selectedData">
  <div *ngIf="selectedData.propAFromType1 !== undefined">
    Type1专属属性：{{ selectedData.propAFromType1 }}
  </div>
  <div *ngIf="selectedData.propBFromType2 !== undefined">
    Type2专属属性：{{ selectedData.propBFromType2 }}
  </div>
</div>

注意：如果两个类型有重名属性，这种方法会失效，优先使用类型守卫方案。

方法三：结合NgSwitch优化结构 #

如果类型分支较多，用NgSwitch让模板结构更清晰：

<div *ngIf="(selectedData$ | async) as selectedData" [ngSwitch]="true">
  <div *ngSwitchCase="isType1(selectedData)">
    Type1专属属性：{{ selectedData.propAFromType1 }}
  </div>
  <div *ngSwitchCase="isType2(selectedData)">
    Type2专属属性：{{ selectedData.propBFromType2 }}
  </div>
</div>

关键注意点 #

• 类型守卫函数必须返回data is TypeX这种类型谓词，才能让TypeScript在模板中正确推断类型，避免编译报错。
• 必须先通过async管道解析selectedData$，并将结果存为局部变量（如selectedData），才能进行后续的类型判断和属性访问。

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