类型&#39;Observable &lt;{}&gt;不可分配给类型&#39;Observable <HttpEvent<any> &gt;”

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));
            })
        );
    }
}

我猜打字稿（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，而您在此处用of（）调用添加了另一个Observable： return of(this.auth.logout()); 但不确定，您的IDE应该在这里给您更好的提示。