Typescript中将基础接口作为泛型类型使用避免Angular模板报错

下面是不同场景下的可选用法：

注意：你提供的模板示例存在语法错误，分支判断应该用*ngSwitchCase而不是[ngSwitch]，正确的ngSwitch结构如下：

<div [ngSwitch]="config.type">
  <span *ngSwitchCase="ConfigType.User"> {{ config.socialNr }} </span>
  <span *ngSwitchCase="ConfigType.Order"> {{ config.shipDate }} </span>
</div>

• 方案1：定义可辨识联合类型（推荐，类型最安全，适配Angular 14+）
  首先将通用类型定义为所有子接口的联合类型，替换原直接使用BaseConfig的场景：

// 新增联合类型定义
type Config = UserConfig | OrderConfig;

// 修改State定义
export interface State extends EntityState<Config> {
  loaded: boolean;
  selectedBookConfig: Config | null;
}
// 组件内的config属性类型同步改为 Config | null

Angular 14及以上版本支持对ngSwitch逻辑的自动类型缩小，配合联合类型定义，模板内判断type字段后直接访问子属性不会触发类型报错。

• 方案2：组件内添加类型守卫方法（兼容所有Angular版本，类型安全）
  在组件TS文件中添加带类型谓词的判断方法，用于模板内的类型收窄：

// 组件TS中新增方法
isUserConfig(config: BaseConfig): config is UserConfig {
  return config.type === ConfigType.User;
}

isOrderConfig(config: BaseConfig): config is OrderConfig {
  return config.type === ConfigType.Order;
}

模板中先调用判断方法确认类型后再访问对应属性：

<div *ngIf="isUserConfig(config)">
  {{ config.socialNr }}
</div>
<div *ngIf="isOrderConfig(config)">
  {{ config.shipDate }}
</div>

• 方案3：临时关闭单属性类型检查（快速适配，不推荐长期使用）
  如果是临时调试或者小范围场景，可以用Angular提供的$any语法跳过当前属性的类型校验：

<span *ngSwitchCase="ConfigType.User"> {{ $any(config).socialNr }} </span>

• 方案4：模板内直接强转类型（适配Angular 17+）
  高版本Angular支持在模板内直接使用as做类型转换：

<span *ngSwitchCase="ConfigType.User"> {{ (config as UserConfig).socialNr }} </span>

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