I'm trying to get a full response from my HTTP calls. According to the Angular documentation I should set my HTTP call "options" as {observe: 'response'}

I get the following error if I do that:

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'Observable<IItem[]>'. Type 'HttpResponse<IItem[]>' is not assignable to type 'IItem[]'. Property 'includes' is missing in type 'HttpResponse<IItem[]>'.

I think my concepts regarding Observables & Typing/Casting aren't that clear.

I've got a HTTP Get request which is returning an observable and Strong typing it into an array of items (See below)

getItems(): Observable <IItem[]>{
    return this._http.get<IItem[]>(url, {observe: 'response'})
    .do(data => console.log('All: ' + JSON.stringify(data)))
};

I tried setting getUsers(): Observable <HttpResponse<IUser[]>> which solved the above error but within my subscribe I got the following error when I try to assign the returned data to a local variable this.item = data; where item is declared as item: Item[]

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'IItem[]

So my questions are:

1. How can I resolve the above error (and why did this error occur)?
2. This might be a stupid question but if ._http.get<IItem[]> is already setting the expected "type" of response do I still need to set the getItems(): Observable <IItem[]> methods return type?

I think I'm not understanding some basic concept that's causing this confusion. Any help will be appreciated. I'm new to Angular 4 so please be gentle.

I'm trying to get a full response from my HTTP calls. According to the Angular documentation I should set my HTTP call "options" as {observe: 'response'}

I get the following error if I do that:

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'Observable<IItem[]>'. Type 'HttpResponse<IItem[]>' is not assignable to type 'IItem[]'. Property 'includes' is missing in type 'HttpResponse<IItem[]>'.

I think my concepts regarding Observables & Typing/Casting aren't that clear.

I've got a HTTP Get request which is returning an observable and Strong typing it into an array of items (See below)

getItems(): Observable <IItem[]>{
    return this._http.get<IItem[]>(url, {observe: 'response'})
    .do(data => console.log('All: ' + JSON.stringify(data)))
};

I tried setting getUsers(): Observable <HttpResponse<IUser[]>> which solved the above error but within my subscribe I got the following error when I try to assign the returned data to a local variable this.item = data; where item is declared as item: Item[]

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'IItem[]

So my questions are:

1. How can I resolve the above error (and why did this error occur)?
2. This might be a stupid question but if ._http.get<IItem[]> is already setting the expected "type" of response do I still need to set the getItems(): Observable <IItem[]> methods return type?

I think I'm not understanding some basic concept that's causing this confusion. Any help will be appreciated. I'm new to Angular 4 so please be gentle.

• javascript
• angular
• typescript

• what do you mean by full response? and do you use http or httpclient? – Max Koretskyi Commented Oct 26, 2017 at 13:00
• 1 Assuming you use HttpClient this should be what you looking for. – Shahar Galukman Commented Oct 26, 2017 at 13:03
• @AngularInDepth. By full response I mean getting headers, status codes and everything else. Currently it's only returning the body. I am using HttpClient – Skywalker Commented Oct 26, 2017 at 13:04
• @ShaharGalukman Thanks for the ment. Thats exactly what I did the only difference being my subscribe is in my ponent while the http.get is within my service. – Skywalker Commented Oct 26, 2017 at 13:46

2 Answers 2

HttpClient.get method is defined to use generic type T:

get<T>(url: string, options?: {
    ...
}): Observable<T>;

So since since you pass <IItem[]> to the get method here this._http.get<IItem[]> according to the definition the get method returns HttpResponse<IItem[]> object. However you declare your method getItems to return IItem[] and hence you get the error:

Type 'Observable<HttpResponse<IItem[]>>' is not assignable to type 'Observable<IItem[]>'.

To fix it, you need to return IItem[]. This can be done by extracting body of type IItem[] from HttpResponse<IItem[]> and return it. do operator can't return anything so you have to use map operator for that:

this._http.get<IItem[]>('url', {observe: 'response'})
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .map(data => data.body)

this should work :

  getItems(): Observable <IItem[]>{
            return this.http
            .get<IItem[]>(url, {observe: 'response'})
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .map( (r: HttpResponse<IItem[]> )  => r.body )
        };