類型&#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應該在這里給您更好的提示。