将Angular和RxJS 5迁移到6之后的错误-类型'Observable <{}>'无法分配给类型'Observable <…>'

Question

I migrated an Angular project from v5 to v6.

In order to update all the imports I already ran rxjs-5-to-6-migrate :

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

But now I have ERRORs like the following:

src/app/products/product.service.ts(54,4): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<{ count: number; next: string; previous: string; results: any[]; }>'.
  Type '{}' is not assignable to type '{ count: number; next: string; previous: string; results: any[]; }'.
    Property 'count' is missing in type '{}'.

product.service.ts :

import { Injectable } from '@angular/core';
//import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

import { catchError, map, tap, finalize } from 'rxjs/operators';

import { Product } from './product';

import { SpinnerService } from './../utilities/spinner/spinner.service';

import { environment } from '../../environments/environment';

const endpoint = environment.apiHost+'/api/products/' //'http://127.0.0.1:8000/api/products/'

@Injectable()
export class ProductService {

  /* Caching few data that does not change so often */
  private productTypes: any[];
  private departments: any[];
  private authors: any[];
  private colors: any[];
  private sizeRuns: any[];

  constructor(private http: HttpClient, private _spinnerService: SpinnerService) { }

  list(params?): Observable<{count:number, next:string, previous:string, results: any[]}> {
    return this.http.get<{count:number, next:string, previous:string, results: any[]}>(endpoint, {params: params})
      .pipe(
        catchError(this.handleError<any>('Retrieving products'))
      );
  }

  /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation='Operation', result?: T) {
    return (error: any): ErrorObservable | Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an Observable with empty result.
      //return of(result as T); 
      return new ErrorObservable(error);
    };
  }

}

I saw other questions like this on StackOverflow, but still I don't understand how to solve. I can probably change the interface {count:number, next:string, previous:string, results: any[]} to simply any , but I don't really want to do it. Any solution?

UPDATE1 : Using an Interface

interface PaginatedList {
  count: number;
  next: string;
  previous: string;
  results: any[];
}

@Injectable()
export class ProductService {

  /* Caching few data that does not change so often */
  private productTypes: any[];
  private departments: any[];
  private authors: any[];
  private colors: any[];
  private sizeRuns: any[];

  constructor(private http: HttpClient, private _spinnerService: SpinnerService) { }

  list(params?): Observable<PaginatedList> {
    this._spinnerService.show('productListSpinner');
    return this.http.get<PaginatedList>(endpoint, {params: params})
      .pipe(
        catchError(this.handleError<any>('Retrieving products')),
        finalize(() => this._spinnerService.hide('productListSpinner'))
      );
  }

  /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation='Operation', result?: T) {
    return (error: any): ErrorObservable | Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an Observable with empty result.
      //return of(result as T); 
      return new ErrorObservable(error);
    };
  }

}

ERRORS :

src/app/products/product.service.ts(61,4): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<PaginatedList>'.
  Type '{}' is not assignable to type 'PaginatedList'.
    Property 'count' is missing in type '{}'.

UPDATE2 :

Checking my errors, I think that ErrorObservable is causing the other errors:

src/app/products/product.service.ts(325,26): error TS2314: Generic type 'ErrorObservable<T>' requires 1 type argument(s).

Answer 1

I can probably change the interface {count:number, next:string, previous:string, results: any[]} to simply any`

By doing this you would simply shot yourself on the foot. Why wouldn't you define the interface of a concept that you know?

The first question that you should ask yourself when handling the error: do I need to gracefully or ungracefully handle it?

Gracefully handling the error would transform it into a "fake" notification in the stream, keeping the type contract of it in most cases. For example:

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Gracefully handle error, returning observable with error message
// Notice that the type contract of the source is mantained
const example : Observable<string> = source.pipe(catchError(val => of(`I caught: ${val}`)));
// Output: 'I caught: This is an error'
// Notice that the next, and not the error callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

In the previous example, I keep the type contract of the source. In the following I dont:

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Gracefully handle error, returning observable with error message
// Notice that by mapping the error to a fake notification of another type, the new
// stream extends the type contract of the source
const example : Observable<string | number> = source.pipe(catchError(val => of(1)));
// Output: 'I caught: This is an error'
// Notice that the next, and not the error callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

The other option is to ungracefully handle an error, by basically applying some logic and then re-throwing. In such case, the type contract of the stream has no information about the error that the stream could arise . For example:

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Ungracefully handle error, re-throwing an object
const example : Observable<string> = source.pipe(catchError(error => throwError({message: 'Error caught', error})));
// Output: 'Something exploded: '
// Notice that the error, and not the next callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

Back to your issue; as it is, your approach is currently gracefully handling the error and extending the type contract of the source stream, without correctly declaring the return type of the method.

The solution to the error would be to change the signature of the method to:

list(params?): Observable<PaginatedList | any>;

Another problem is that you are directly using ErrorObservable , which is indeed an implementation detail. Normally you would use the throwError operator.

Answer 2

您可以定义“或”运算符。

Observable<{count:number, next:string, previous:string, results: any[]}> |  Observable<any>