Angular RxJS自定义管道报错：Observable<void>与Observable<{}>类型不匹配

你遇到的是RxJS操作符类型推断不匹配的问题，咱们一步步拆解来看：

错误原因分析 #

你的defaultQuery函数返回的是一个map操作符，但这个map的回调函数没有接收任何参数——TypeScript会默认推断这个回调的输入参数类型为{}，导致整个操作符的类型变成了UnaryFunction<Observable<{}>, Observable<Query>>。而你的源Observable$searchClick是Observable<void>，两者的输入类型不兼容，就出现了你看到的编译错误。

解决方案 #

这里有几种简洁的修复方式，你可以根据喜好选择：

方案1：给map回调明确指定void类型参数 #

给map里的回调函数加上一个void类型的参数（用下划线表示我们不需要这个值），让TypeScript明确知道源Observable的类型是void：

const defaultQuery = () => map((_: void) => ({ 
  filter: this.cercacodi, 
  offset: 0, 
  limit: SearchComponent.DEFAULT_PAGE_SIZE 
} as pojo.Query));

// 后续调用保持不变
this.searchQuery$ = this.$searchClick.pipe(defaultQuery());

方案2：使用mapTo替代map（更贴合场景） #

因为你的场景是不管$searchClick发出的void值是什么，都返回固定的Query对象，用mapTo会更语义化，而且类型推断会自动匹配：

const defaultQuery = () => mapTo({ 
  filter: this.cercacodi, 
  offset: 0, 
  limit: SearchComponent.DEFAULT_PAGE_SIZE 
} as pojo.Query);

this.searchQuery$ = this.$searchClick.pipe(defaultQuery());

方案3：显式指定defaultQuery的返回类型 #

如果你坚持用map，也可以给defaultQuery函数显式指定返回类型，强制匹配源Observable的类型：

import { UnaryFunction } from 'rxjs';

const defaultQuery = (): UnaryFunction<Observable<void>, Observable<pojo.Query>> => 
  map(() => ({ 
    filter: this.cercacodi, 
    offset: 0, 
    limit: SearchComponent.DEFAULT_PAGE_SIZE 
  } as pojo.Query));

this.searchQuery$ = this.$searchClick.pipe(defaultQuery());

这几种方法都能解决你遇到的类型不匹配问题，推荐方案2，因为它更符合你当前的业务场景——把源事件映射为固定的查询对象。

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