如何在Angular模板中声明变量处理Signal的TypeScript静态错误？

你定义了如下枚举、接口和信号：

export enum LoadingReason {
  indexingFiles,
}

export interface LoadingState {
  reason: LoadingReason;
  percent?: number;
}

isLoading: Signal<false | LoadingState>;

在模板中尝试读取percent属性时会触发TypeScript静态错误，因为无法保证isLoading()的返回值不是false，比如这段代码会报错：

@if(isLoading() !== false && isLoading().percent === undefined){
  <mat-spinner diameter="30"></mat-spinner>
}

虽然在控制器中可以通过存储信号值到变量的方式解决类型收窄问题，但模板无法直接这么做，以下是几种可行的解决方案：

解决方案 #

1. 使用Angular 17+的@let模板变量 #

Angular 17及以上版本支持@let语法，可在模板中临时存储信号值，实现和控制器一致的类型收窄效果：

@let loadingState = isLoading();
@if(loadingState !== false && loadingState.percent === undefined){
  <mat-spinner diameter="30"></mat-spinner>
}

通过@let将信号当前值存入变量后，后续判断仅针对该变量，TypeScript能正确推断类型，消除错误。

2. 创建派生信号 #

在控制器中定义派生信号，提前处理状态判断逻辑，模板直接使用派生信号即可：

// 控制器内定义
showIndeterminateSpinner = computed(() => {
  const loadingState = this.isLoading();
  return loadingState !== false && loadingState.percent === undefined;
});

模板中调用：

@if(showIndeterminateSpinner()){
  <mat-spinner diameter="30"></mat-spinner>
}

这种方式将逻辑封装在控制器中，模板更简洁，同时避免类型问题。

3. 使用类型守卫函数 #

若需要更复杂的类型判断，可在控制器中定义类型守卫函数，模板中调用实现类型收窄：

// 控制器内定义类型守卫
isLoadingWithNoPercent(state: false | LoadingState): state is LoadingState & { percent: undefined } {
  return state !== false && state.percent === undefined;
}

模板中使用：

@if(isLoadingWithNoPercent(isLoading())){
  <mat-spinner diameter="30"></mat-spinner>
}

TypeScript会通过类型守卫函数正确推断isLoading()的类型，允许安全访问percent属性。

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