Not able to assign Reponse type object to Response type variable

Question

I'm getting the following error.

Argument of type 'Response' is not assignable to parameter of type 'Response'.
Property 'body' is missing in type 'Response'.

The code I'm running relies on observables.

public register(reporter: Reporter): Observable<Response> {

  const content = JSON.stringify(reporter);
  const headers = new Headers({ "Content-Type": "application/json" });
  const options = new RequestOptions({ headers: headers });
  const userUrl = env.Url + "user";
  const passwordUrl = env.Url + "PasswordClaim/" + reporter.Id;

  const observable = new Observable<Response>(_ => {
    this.http
      .post(userUrl, content, options)
      .subscribe(result => this.http
          .get(passwordUrl)
          .subscribe(result => _.next(result), error => _.error(error)),
      error => _.error(error));
  });

  return observable;
}

Before, we used weakly typed observable, which works but isn't as proper and neat as I wish. So, I hovered over result and got that it's of type Response. Using that, however, seems to produce this weird error message.

I can imagine that it's different classes named the same way and placed in separate namespaces. However, googling gave me no confirmation of it, let alone a suggested solution on how to resolve it. There are suggestions to omit the typing all together but that's not a part of the question.

Answer 1

What you're doing here is returning an Observable of an Observable. Your method should be typed along the lines of

public register(reporter: Reporter): Observable<Reporter> {}

Or

public register(reporter: Reporter): Observable<any> {}

Maybe you could try that and see the result ?

EDIT I have a better grip of your problem now.

Try something like this

public register(reporter: Reporter): Observable<Response> {

  const content = JSON.stringify(reporter);
  const headers = new Headers({ "Content-Type": "application/json" });
  const options = new RequestOptions({ headers: headers });
  const userUrl = env.Url + "user";
  const passwordUrl = env.Url + "PasswordClaim/" + reporter.Id;

  return this.http
    .post(userUrl, content, options)
    .flatMap(result => this.http.get(passwordUrl));
}

Basically, an HTTP call will return a response. By using subscribe, you actually manage the response. What you are doing is treating the response, the returning a new, custom response.

What I do instead, is making two calls with flatMap, and returning the result of the last call.

EDIT 2 Here is the complete function :

public register(reporter: Reporter): Observable<Response> {

  let ret = {};

  const content = JSON.stringify(reporter);
  const headers = new Headers({ "Content-Type": "application/json" });
  const options = new RequestOptions({ headers: headers });
  const userUrl = env.Url + "user";
  const passwordUrl = env.Url + "PasswordClaim/" + reporter.Id;

  return this.http
    .post(userUrl, content, options)
    .flatMap(result => {
      ret['result1'] = result;
      return this.http.get(passwordUrl).map(r => ret['result2'] = r);
    });
}