创建值为返回Observable的方法的Map触发TS类型错误，求Map实现方案

我来帮你拆解下这个TypeScript错误的原因，以及如何用Map顺利实现你的需求～

错误核心原因 #

你遇到的类型错误本质上是类型不匹配：

• 你的sourceMap里存储的是ReturnObsFunc类型的函数（也就是(str?: string) => Observable<any>），但getFilterSource$方法声明要返回的是Observable<any>。直接返回函数本身，TypeScript当然会报错，因为函数和它返回的Observable完全是两种类型。
• 另外你定义Map的时候用了AnotherFunc，这个类型应该换成你已经声明好的ReturnObsFunc，这样类型约束才准确。

修正后的Map实现代码 #

只需要两步调整：调用取出的函数获取Observable，同时处理filterType不在映射中的边界情况（避免运行时错误）：

type ReturnObsFunc = (str?: string) => Observable<any>;

private getFilterSource$(filterType: FilterType): Observable<any> {
  // 用ReturnObsFunc作为Map的值类型，保证类型一致
  const sourceMap = new Map<FilterType, ReturnObsFunc>([
    [FilterType.SubClient, this._filtersService.getClients$],
    [FilterType.Product, this._filtersService.getProducts$],
  ]);
  
  const sourceFunc = sourceMap.get(filterType);
  // 处理filterType不在映射中的情况，这里用EMPTY示例，也可以抛出错误
  if (!sourceFunc) {
    return EMPTY; // 需要从rxjs导入EMPTY：import { EMPTY } from 'rxjs';
  }
  // 调用函数得到Observable后返回
  return sourceFunc();
}

关于你之前的对象映射代码 #

其实你之前的对象映射写法也存在同样的类型问题——直接返回函数而非Observable，只是TypeScript对对象字面量的类型推断可能更宽松一些。如果要让对象映射的代码类型严格正确，同样需要调用函数：

private getFilterSource$(filterType: FilterType): Observable<any> {
  const sourceMap: Record<FilterType, ReturnObsFunc> = {
    [FilterType.SubClient]: this._filtersService.getClients$,
    [FilterType.Product]: this._filtersService.getProducts$,
  };
  
  const sourceFunc = sourceMap[filterType];
  return sourceFunc();
}

总结 #

用Map完全可以实现你的需求，核心就是要记住：你在映射里存的是生成Observable的函数，而不是Observable本身，所以返回时必须调用这个函数才能得到符合方法返回类型的结果。

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