使用带有 tap 和 map RxJS 运算符的函数时，TypeScript 类型会出错吗？

Question

我遇到了奇怪的 TypeScript 错误，而且我很难破译什么是错误的。我的代码运行良好，但 PHPStorm IDE 抛出以下错误：

TS2345 Argument of Type 'UnaryFunction<Observable<{}>, Observable<{}>>' is not assignable to parameter of type 'OperatorFunction<Object, {}>'.

该错误出现在下面代码的点击功能上。

// Get Search Results
getSearchResults(payload: object): Observable<SearchResult[]> {
    let sbRef = this.snackBar.openFromComponent(SmallSpinnerComponent);
    let preparedPayload = this.addPayloadIdentifiers(payload);

    return this.http.post(environment.searchUrl, preparedPayload, {responseType: 'json'}).pipe(
        tap(res => console.log(res)),
        map(res => {
            sbRef.dismiss();
            return this.translateJSONResultSetV1(res);
        }),
        catchError(this.errorHandler.handleError(`getSearchResults error`))
);
}

如果我完全注释掉tap运算符，我会在地图运算符上收到以下错误：

TS2345 Argument of Type 'UnaryFunction<Observable<{}>,
Observable<SearchResult[]>>' is not assignable to parameter of type
'OperatorFunction<Object, {}>'.
Types of parameters 'source' and 'source' are incompatible.
Type 'Observable<Object>' is not assignable to type 'Observable<{}>'

我很想认为这个错误真的很简单，但我似乎无法弄清楚是什么导致了它。此外，从 RESTful 接收的 JSON 有效负载需要在客户端进行大量处理。这是不可避免的，所以我translateJSONResultSetV1在map操作符中使用了一个辅助函数来返回正确的对象类型。在地图运算符中使用函数是否不正确？这会导致错误吗？

我想强调代码运行良好。但是，如果我不正确地使用 Observables，我想修复它，这样这段代码就不会因未来的更新而中断。

编辑： RxJS 版本 5.5.2

进口：

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { environment } from "../../../environments/environment";
import { catchError, map, tap} from "rxjs/operators";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/merge';
import { ErrorHandlerService } from "./error-handler.service";
import { SearchFilterDropdown } from "../../classes/search-filter-dropdown";
import { SessionService } from "./session.service";
import { BusinessRule } from "../../classes/business-rule";
import { SearchResult } from "../../classes/search-result";
import { SectionHeading } from "../../classes/section-heading";
import { SmallSpinnerComponent } from "../../shared/small-spinner/small-spinner.component";
import { MatSnackBar } from "@angular/material";

Answer 1

我的钱是你使用catchError运营商的钱。该语句this.errorHandler.handleError('getSearchResults error')需要返回一个返回可观察值的方法。

catchError就像 switchMap 一样，当源可观察错误时，可以推断出不同的类型。这个边缘情况运算符有能力产生一个错误，“确实非常简单，但我似乎无法弄清楚是什么导致了它。”