如何修复Observable无法赋值给Observable<AppState<Response>>类型错误？

问题根源 #

你定义的AppState<X>接口明确要求三个必填属性：dataState、appData、error，但代码里两处返回的对象没满足这个要求：

• startWith返回的加载状态对象缺少error属性
• catchError返回的错误状态对象缺少appData属性

TypeScript强类型检查会严格校验接口的所有必填字段，因此触发了类型不匹配报错。

修复代码 #

补全缺失的属性即可，修改ngOnInit中的pipe部分：

ngOnInit(): void {
  this.stateApp$ = this.serverService.getServerList().pipe(
    map(response => {
      this.dataSubject.next(response);
      return {
        dataState: DataState.LOADED,
        appData: {
          ...response,
          data: { servers: response.data?.servers?.reverse() || [] }
        },
        error: '',
      };
    }),
    // 补全error属性，初始加载时设为空字符串
    startWith({ dataState: DataState.LOADING, appData: null, error: '' }),
    catchError((error: string) => {
      // 补全appData属性，错误状态下设为null
      return of({ dataState: DataState.ERROR, appData: null, error });
    })
  );
}

额外优化建议 #

如果想让不同状态下的属性更灵活，可以调整AppState接口，把appData和error设为可选属性：

export interface AppState<X> {
  dataState: DataState;
  appData?: X;
  error?: string;
}

这种方式下不同状态只需传递对应属性，但会牺牲部分类型安全性，需根据业务场景选择。

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