Angular多类型Signal配合@switch报错，需调整哪些配置？

我此前在项目中用以下方式定义多类型Signal：

results = signal<
  | { state: 'error'; error: string }
  | { state: 'normal' }
  | { state: 'success'; message: string }
  | { state: 'loading' }
>({ state: 'normal' });

并在HTML模板中通过@switch语法根据状态渲染对应内容：

@switch (results().state) {
  @case ("error") {
    <div role="alert" class="alert alert-error">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 shrink-0 stroke-current"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      <span>{{ results().error }}</span>
    </div>
  }
}

这段代码之前能正常运行，但在最新项目中出现了类型错误：

Property 'error' does not exist on type '{ state: "error"; error: string; } | { state: "normal"; } | { state: "success"; message: string; } | { state: "loading"; }'. Property 'error' does not exist on type '{ state: "normal"; }'

解决办法 #

1. 使用@let存储Signal值（推荐） #

Angular 17及以上版本支持@let指令，在模板中定义局部变量存储Signal的当前值，TypeScript会自动在@case分支中完成类型收窄：

@let result = results();
@switch (result.state) {
  @case ("error") {
    <div role="alert" class="alert alert-error">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 shrink-0 stroke-current"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      <span>{{ result.error }}</span>
    </div>
  }
}

2. 组件类中添加类型安全的状态获取方法 #

在组件类里定义一个方法，确保返回值的类型能被模板正确识别：

getCurrentResult() {
  return this.results();
}

然后在模板中调用这个方法替代直接访问Signal：

@switch (getCurrentResult().state) {
  @case ("error") {
    <div role="alert" class="alert alert-error">
      <!-- 省略SVG内容 -->
      <span>{{ getCurrentResult().error }}</span>
    </div>
  }
}

3. 调整编译器配置（不推荐） #

如果暂时无法修改代码，可以通过降低模板类型检查严格度来规避错误，但会失去类型安全保障。修改tsconfig.json：

{
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

内容的提问来源于stack exchange，提问作者Mahmoud El-Yamani