RxJS从6.x升级至7.x后combineLatest操作符调用报错问题

兄弟，这问题我熟！你遇到的是RxJS 7.x对combineLatest操作符的API做了破坏性变更导致的。

问题原因 #

在RxJS 6.x里，combineLatest支持直接把投影函数（就是你最后那个返回{query, status}的函数）作为最后一个参数传入，但到了7.x版本，这个重载被移除了。现在combineLatest如果接收多个参数，最后一个非可观察对象的参数会被当成调度器（SchedulerLike），所以TypeScript才会报错说你的函数不能赋值给SchedulerLike类型。

解决方案 #

给你两种可行的修改方式，选哪种都可以：

方式一：将源Observable放入数组，配合pipe(map)处理投影

把所有需要合并的可观察对象放到一个数组里传给combineLatest，然后通过pipe(map)来完成原来投影函数的逻辑：

searchParams$ = combineLatest([
  this.searchQuery.valueChanges.pipe(startWith(null), debounceTime(200)),
  this.searchStatus.valueChanges.pipe(startWith('ALL'))
]).pipe(
  map(([query, status]) => {
    return { query, status };
  })
);

方式二：使用RxJS 7新增的combineLatestWith操作符

这个操作符是7.x专门为链式调用设计的，写法更流畅：

searchParams$ = this.searchQuery.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  combineLatestWith(this.searchStatus.valueChanges.pipe(startWith('ALL'))),
  map(([query, status]) => ({ query, status }))
);

两种方式都能实现你原来的功能，完美适配RxJS 7.x的API规范～

备注：内容来源于stack exchange，提问作者Miha Ljubi