Angular模板渲染多类型联合变量TSLint报错的整洁解决方案

Angular模板静态类型检查无法识别跨字段的判别式类型关联：虽然业务逻辑上questionType值和answer类型一一对应，但类型检查器不会基于同对象的一个字段值，自动收窄另一个字段的联合类型，因此直接在*ngIf里判断questionType后访问answer的独有属性，就会触发TS报错。
你提到的三种方案都存在不必要的实现成本，下面的方案完全满足严格TSLint要求、无any、无需修改后端接口、实现和扩展成本极低。

1. 前端侧补充判别式联合类型 #

不需要修改后端接口定义，仅在前端补全类型映射，让TS能识别题型和答案类型的对应关系：

// 基于已有接口扩展严格类型，和后端返回结构完全对齐
type IntQuestion = Omit<AnsweredQuestion, 'questionType'|'answer'> & {
  questionType: 'int',
  answer: number
}
type SingleSelectQuestion = Omit<AnsweredQuestion, 'questionType'|'answer'> & {
  questionType: 'single',
  answer: SingleAnswer
}
type MultiSelectQuestion = Omit<AnsweredQuestion, 'questionType'|'answer'> & {
  questionType: 'multi',
  answer: MultiAnswer
}
type BoolQuestion = Omit<AnsweredQuestion, 'questionType'|'answer'> & {
  questionType: 'bool',
  answer: boolean
}
// 后续新增题型只需要补充对应类型即可
type StrictAnsweredQuestion = IntQuestion | SingleSelectQuestion | MultiSelectQuestion | BoolQuestion;

2. 组件类添加通用类型守卫方法 #

Angular模板可以识别类方法返回的类型谓词，加一个通用守卫方法即可实现模板内的类型收窄：

// 组件类内添加
isQuestionType<T extends StrictAnsweredQuestion['questionType']>(
  question: AnsweredQuestion,
  targetType: T
): question is Extract<StrictAnsweredQuestion, {questionType: T}> {
  return question.questionType === targetType;
}

3. 模板替换原有判断逻辑 #

把原来直接判断questionType的*ngIf换成调用守卫方法，TS会自动收窄对应分支的answer类型，不会报属性不存在的错误：

<div *ngFor="let item of answeredQuestions">
  <ng-container *ngIf="isQuestionType(item, 'int')">
    {{ item.answer }}
  </ng-container>
  <ng-container *ngIf="isQuestionType(item, 'single')">
    {{ item.answer.answerText }}
  </ng-container>
  <ng-container *ngIf="isQuestionType(item, 'multi')">
    <span *ngFor="let ans of item.answer.answers; let last = last">
      {{ ans.answerText }}{{ last ? '' : '、' }}
    </span>
  </ng-container>
  <ng-container *ngIf="isQuestionType(item, 'bool')">
    {{ item.answer ? '是' : '否' }}
  </ng-container>
  <!-- 其他题型直接加分支即可 -->
</div>

• 零侵入：不需要修改后端接口，不需要对接口返回数据做二次转换，拿到数据直接渲染
• 无冗余：不需要为简单题型编写独立组件、不需要写复杂的万能转换Pipe，渲染逻辑直接放在模板中，可读性高
• 类型安全：全程无any类型，TS类型检查完全生效，避免访问不存在属性的运行时错误
• 易扩展：新增题型时只需要补充对应TS类型、加一个模板分支即可，不需要修改核心逻辑

如果后续题型增多，可以换成ngSwitch结构简化模板，类型守卫逻辑依然生效。对于交互特别复杂的特殊题型，再单独抽组件渲染即可，不会出现过度设计问题。

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