Question

我有这样的设置

api.service（包装httpClient模块）
customer.service

api服务看起来像这样：

.*

在我的customer.service中我有：

get<T>(url: string, options?) {
return this.httpClient.get<T>(this.apiUrl + url, this.getOptions(options));}

它给了我这个错误：

    private fetchCustomer(access_token: String): Observable<Customer> {
      const options = { headers: new HttpHeaders({ Authorization: 'Bearer ' + access_token }) };
      return this.http
        .get<Customer>('customers/me', options)
        .map(res => {
          const customer = res.data;
          customer.access_token = access_token;
          return customer;
        })
        .catch(this.handleError.bind(this));
    }

Answer 1

查看角度源代码（v4.3.3），当你包装http.get而不指定options的类型时，typescript编译器正在使用这个类型定义

/**
 * Construct a GET request which interprets the body as JSON and returns the full event stream.
 *
 * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
 */
get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'events';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpEvent<T>>;

要使typescript编译器使用正确的类型定义，您可以指定选项的类型为Object。在您的情况下，getOptions方法应指定它返回Object类型。

get<T>(url: string, options?) {
    return this.httpClient.get<T>(
        this.apiUrl + url, 
        this.getOptions(options) // this.getOptions needs to specify it is returning the type Object
    );
}

getOptions(options): Object {...}

现在，typescript编译器将找到正确的类型定义

/**
 * Construct a GET request which interprets the body as JSON and returns it.
 *
 * @return an `Observable` of the body as type `T`.
 */
get<T>(url: string, options?: {
    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<T>;

现在终于可以访问数据了

const customer = res.data;

Answer 2

Angular 4.3中的新HttpClient目前有get<T>的3个原型

他们是

get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'events';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpEvent<T>>;

get<T>(url: string, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<T>>;

get<T>(url: string, options?: {
    headers?: HttpHeaders;
    observe?: 'body';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<T>;

client.d.ts顶部的评论说明了这一点。

 * Each request method has multiple signatures, and the return type varies according to which
 * signature is called (mainly the values of `observe` and `responseType`).

真正重要的部分是观察参数

get<T>(url, {observe: 'events'})返回HttpEvent<T>

get<T>(url, {observe: 'response'})返回HttpResponse<T>

get<T>(url, {observe: 'body'})返回T

注意：如果将选项部分子类化为方法，则必须返回一种Object类型，而编译器将自动选择第一种返回HttpEvent<T>的方法

所以

getOptions(): any {
    return { observe: 'body' }
};

和

getOptions(): any {
    return { observe: 'response' }
};

将编译为错误的界面并返回HttpEvent<T>，但

getOptions(): object {
    return { observe: 'body'}
};

和

getOptions(): object {
    return { observe: 'response'}
};

将分别返回T和HttpResponse<T>

Answer 3

解决方案是使用获取json数据的新方法....

const customer = res['data'];

Answer 4

首先使用json方法将数据转换为javascript对象。然后使用subscribe获取所需的数据。

return this.http
        .get<Customer>('customers/me', options)
        .map(res => res.json())
        .subscribe(data => {
          const customer = res.data;
          customer.access_token = access_token;
          return customer;
        })
        .catch(this.handleError.bind(this));

“HttpEvent <customer>”类型中不存在属性“数据”

4 个答案: