Angular HTML结合严格TypeScript检查处理联合类型的问题及解决

升级Angular 14应用至TypeScript 4.7.2后，Angular CLI的编译检查出现破坏性变化，其中典型问题为联合类型无法在模板中通过类型守卫正确收窄。

问题复现 #

1. 类型定义 #

先定义如下接口：

interface UnionType { 
  name: string;
  type: 'tester' | 'developer';
}

interface Tester extends UnionType { 
  name: string;
  type: 'tester';
  information: string;
}

interface Developer extends UnionType { 
  name: string;
  type: 'developer';
  tools: string;
}

2. 组件变量声明 #

在组件中声明联合类型数组：

public array: (Tester | Developer)[];

3. 模板代码与编译错误 #

模板尝试通过type字段判断类型并访问专属属性：

<div *ngFor="let unionType of array">
   <div *ngIf="unionType.type === 'tester'">
      {{ unionType.information }}
   </div>
   <div *ngIf="unionType.type === 'developer'">
      {{ unionType.tools }}
   </div>
</div>

此时编译器抛出两个错误：

• Property 'information' does not exist on type 'Developer'
• Property 'tools' does not exist on type 'Tester'
  即便通过*ngIf判断了type值，TypeScript仍无法正确收窄类型。

4. 子组件传参报错 #

将Tester | Developer类型变量传入仅接收Tester类型的子组件时，同样报错：

<div *ngFor="let unionType of array">
   <div *ngIf="unionType.type === 'tester'">
      <display-tester [tester]="unionType"></display-tester>
   </div>
</div>

export class DisplayTester {
   @Input() public tester: Tester;
}

原因分析 #

问题根源在于类的类型定义不严谨。原Tester类定义中，type属性仅赋值但未显式指定字面量类型：

class Tester extends UnionType { 
  name: string;
  type = 'tester';
  information: string;
}

此时TypeScript会将type的类型推断为string，而非预期的'tester'字面量类型，导致编译器无法通过type值识别实例的具体类型，自然无法完成类型收窄。

解决方案 #

修改类的定义，显式指定type的类型为对应字面量类型，同时保留赋值：

class Tester extends UnionType { 
  name: string;
  type: 'tester' = 'tester';
  information: string;
}

同理，Developer类需做相同修改：

class Developer extends UnionType { 
  name: string;
  type: 'developer' = 'developer';
  tools: string;
}

显式指定类型后，TypeScript可通过type值正确识别实例类型，模板中的类型守卫正常工作，编译错误即可解决。

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