类型 'Observable<{}> 不可分配给类型 'Observable<HttpEvent<any>>'

Question

我刚刚将 Angular 6.1 升级到 7，在我的 Auth Interceptor 上遇到以下错误：

ERROR in src/app/core/interceptors/auth.interceptor.ts(31,9): error TS2322: Type 'Observable<{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>>' is not assignable to type 'Observable<HttpEvent<any>>'.
  Type '{} | HttpProgressEvent | HttpSentEvent | HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>' is not assignable to type 'HttpEvent<any>'.
    Type '{}' is not assignable to type 'HttpEvent<any>'.
      Type '{}' is not assignable to type 'HttpUserEvent<any>'.
        Property 'type' is missing in type '{}'.
src/app/core/interceptors/auth.interceptor.ts(62,31): error TS2345: Argument of type '(newToken: string) => Observable<HttpEvent<any>> | Observable<Observable<boolean>>' is not assignable to parameter of type '(value: string, index: number) => ObservableInput<HttpEvent<any>>'.
  Type 'Observable<HttpEvent<any>> | Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<HttpEvent<any>>'.
    Type 'Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<HttpEvent<any>>'.
      Type 'Observable<Observable<boolean>>' is not assignable to type 'Iterable<HttpEvent<any>>'.
        Property '[Symbol.iterator]' is missing in type 'Observable<Observable<boolean>>'.

这里是有问题的代码：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | HttpEvent<any>> {
        **L31** return next.handle(this.addToken(req, this.auth.getToken()))
            .pipe(
                catchError(error => {
                    if (error instanceof HttpErrorResponse) {
                        switch ((<HttpErrorResponse>error).status) {
                            case 400:
                                this.auth.logout();
                                return throwError(error);
                            case 401:
                                return this.handle401Error(req, next);
                            default:
                                return throwError(error);
                        }
                    } else {
                        return throwError(error);
                    }
                })
            );
    }

handle401Error(req: HttpRequest<any>, next: HttpHandler) {
    if (!this.isRefreshingToken) {
        this.isRefreshingToken = true;

        // Reset here so that the following requests wait until the token
        // comes back from the refreshToken call.
        this.tokenSubject.next(null);
        console.log('Refresh Token');

        return this.auth.refreshSession()
            .pipe(
                **L62** switchMap((newToken: string) => {
                    if (newToken) {
                        this.tokenSubject.next(newToken);
                        return next.handle(this.addToken(req, newToken));
                    }
                    // If we don't get a new token, we are in trouble so logout.
                    return of(this.auth.logout());
                }),
                finalize(() => {
                    this.isRefreshingToken = false;
                })
            );
    } else {
        return this.tokenSubject.pipe(
            filter(token => token != null),
            take(1),
            switchMap(token => {
                return next.handle(this.addToken(req, token));
            })
        );
    }
}

我猜 Typescript (3.1.3) 发生了变化导致这个错误，但我不知道如何解决它，所以任何帮助将不胜感激！

Answer 1

你的错误：

ERROR in src/app/core/interceptors/auth.interceptor.ts(31,9): error
TS2322: Type 'Observable<{} | HttpProgressEvent | HttpSentEvent |
HttpHeaderResponse | HttpResponse<any> | HttpUserEvent<any>>' is not
assignable to type 'Observable<HttpEvent<any>>'

角度界面是：

interface HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
}

见https://angular.io/api/common/http/HttpInterceptor

您的代码：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | HttpEvent<any>> {

我们看到，您的方法的返回类型与接口中定义的返回类型不匹配。您必须更新您的代码。

src/app/core/interceptors/auth.interceptor.ts(62,31): error TS2345:
Argument of type '(newToken: string) => Observable<HttpEvent<any>> |
Observable<Observable<boolean>>' is not assignable to parameter of
type '(value: string, index: number) =>
ObservableInput<HttpEvent<any>>'.

这里是 ObservableInput<HttpEvent<any>>，但您的代码返回 Observable<HttpEvent<any>> 或 Observable<Observable<boolean>>。

我猜问题是 this.auth.logout() 返回了一个 Observable 并且你在这里添加了另一个 Observable 和你的 of() 调用：return of(this.auth.logout()); 但不确定，你的 IDE 应该在这里给你更好的提示。