住宅 '數據' 上類型不存在 'HttpEvent <Customer>'

Question

我有這樣

• api.service一個設置（包HttpClient的模塊）
• customer.service

的api服務得到看起來像這樣：

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

在我的customer.service我有：

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)); 
    } 

，它給我這個錯誤：

[ts] 
Property 'data' does not exist on type 'HttpEvent<Customer>'. 
Property 'data' does not exist on type 'HttpSentEvent'. 

Answer 1

的解決方案是使用獲取JSON數據的新的方式....

const customer = res['data']; 

Answer 2

首先將數據轉換爲使用JSON方法的JavaScript對象。然後使用訂閱獲取您需要的數據。

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)); 

Answer 3

尋找在角的源代碼（V4.3.3）中，當您纏繞http.get沒有指定的options類型的打字稿編譯器使用這種類型的定義

/** 
* 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>>; 

爲了讓打字稿編譯器使用正確的類型定義，你可以指定選項是t ype對象。在你的情況下，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 {...} 

現在打字稿編譯器會找到正確的類型定義

/** 
* 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 4

在角4.3新的HttpClient擁有目前3個protoypes爲get<T>

它們是

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>分別