Type 'Observable>' is not assignable to type 'Observable'

Question

I have a simple service with the following content:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AddressService {

  constructor(private http: Http) { }

  getAnything = (): Observable<Response> => {
    return this.http.get('https://my_api.com')
      .map(this.handleSuccess)
      .catch(this.handleError);
  }

  handleError = (error: Response): Observable<Response> => {
    return Observable.throw(error || 'Server Error');
  }

  handleSuccess = (response: Response): Observable<Response> => {
    let body;

    if (response.text()) {
      body = response.json();
    }

    return body || {};
  }
}

It was working perfectly, until I upgrade Typescript from 2.3.4 to 2.4.1.

Now, after upgrade, I'm getting the weird error:

Type 'Observable<Response | Observable<Response>>' is not assignable to type 'Observable<Response>'

What's the point here? What are the changes in TS 2.4.x that make my app stop working properly?

why are you upgrading to 2.4.x https://stackoverflow.com/questions/44793859/rxjs-subject-d-ts-error-class-subjectt-incorrectly-extends-base-class-obs/44793989#44793989 — CharanRoot, Jul 14 '17 at 03:56
@Jonnysai I'm not sure I understood... are you saying that I can't upgrade to 2.4.1? — dev_054, Jul 16 '17 at 00:26
handleSuccess = (response: Response): Observable is not returning an observable, just any. The fact that your return types were wrong and now the compiler complains is a good sign — Jota.Toledo, Jul 19 '17 at 21:45
I guess the error is in `handleSuccess` function it doesnt return `Observable`, it returns just JSON like object, isn't it? — Nodarii, Jul 21 '17 at 17:11

score 7 · Accepted Answer · answered Jul 17 '17 at 01:04

7

TypeScript 2.4 introduced better checking for generics. It is highlighting errors in your code that should be fixed.

For example, the return type of handleSuccess does not match what it is returning; it's returning an anonymous object, but is typed as returning Observable<Response>. And because it's being used with map, you end up with a composed observable that's typed as Observable<Response | Observable<Response>>.

The errors you are seeing are real and should be fixed.

answered Jul 17 '17 at 01:04

cartant

57,105
17
163
197

1

An Observable is NOT returned by your handleSuccess. Take a look at the HTTP docs https://tools.ietf.org/html/rfc2616#section-6 You are returning a json payload... or a empty object. – JGFMK Jul 18 '17 at 20:41

Peter Wone · Answer 2 · 2017-07-17T01:21:52.313

The change is stronger type-checking.

An Observable<Response> is not assignable to something typed as Response because they are different types. For brevity lets call these types X and Y

Observable<X | Y> is not assignable to something typed as Y because while it might contain a Y it might also contain an X, and this is rejected by the stricter checking introduced in version 2.4.1

Capture the value of your expression into a let variable and return that variable. Then you will be able to inspect the type of the variable which will show you that it's not compatible just as the compiler reports.

To make your code compile you should test for an instance of the correct type before casting.

If you don't have time to clean up your codebase you can dial back the stronger type-checking with --noStrictGenericChecks

Here's some real TS code with a problem parallel to yours. In this example, FieldInstance lacks a Form property but FormInstance has one and this allows me to distinguish them and handle the type ambiguity. FieldInstanceRepeater is assignable to FieldInstance because it is a descendant.

constructor(scope: FormInstance | FieldInstanceRepeater, field: IFormFieldRow) {
  this.FormInstance = ((function getFormInstance(fi: FormInstance | FieldInstance): FormInstance | FieldInstance {
    let isFormInstance = !!(fi as FormInstance).Form;
    return isFormInstance ? fi : getFormInstance((fi as FieldInstance).Scope);
  })(scope) as FormInstance);
  this.Scope = scope;
  ...
}

Jota.Toledo · Answer 3 · 2017-07-20T14:29:44.990

Consider doing the following changes:

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { _throw } from 'rxjs/observable/throw';

export interface Data{} // an interface to define the object in JSON format returned by your backend

@Injectable()
export class AddressService {

  constructor(private http: Http) { }

  getAnything = (): Observable<Data> => {
    return this.http.get('https://my_api.com')
      .map(this.handleSuccess)
      .catch(this.handleError);
  }

  handleError = (error: Response) : ErrorObservable { // The return type is ErrorObservable, which is a specialization of Observable<any>
    return _throw(error || 'Server Error');
  }

  handleSuccess = (response: Response) { // the return here is any, as you dont know how do the POJO(s) generated by response.json() look like
    let body;

    if (response.text()) {
      body = response.json();
    }

    return body || {};
  }
}

The newer versions of typescript introduced stronger type/generics detection, so that why the compiler is complaining about your current methods, as their return types just dont match.

In the latest release of angular, the http client was redone to avoid the parsing of untyped POJOs (calling r.json()). For this purpose the new http methods are generic, so developers can now map directly into a type when extracting the response content. For further information take a look at this link

Type 'Observable>' is not assignable to type 'Observable'

3 Answers3