Angular HttpClient 在 service return Observable 指定型態的問題。

環境設定：

OS: Ubuntu 18.04 LTS
Angular Cli :  7.2.3
NodeJS : 8.11.4
rxjs : 6.3.3
Typescript: 3.2.2

問題：

今天在撰寫 Http service POST API時 遇到一個很奇怪的編譯問題。程式碼如下：

CheckToken(tk: string): Observable<TokenResult> { console.log(`tk: ${tk}`); const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/json' }) };
const body = { id: tk || '' }; console.log(body); return this.http.post(this.url.checkTokenUrl, body, httpOptions) .pipe( catchError(this.handleError) ); }

這邊主要是一個發送一個 Http request 跟 server 詢問這個 token 是否合法的程式碼。然後這個 function 主要要回傳 Observable為 TokenResult 的型態給呼叫者。而 TokenResult 其實只是一個 interface 。其內容如下：

interface TokenResult { message: string; result: boolean; }

但是在 ng serve 的時候出現下方的錯誤訊息：

其實我記得以前用 Angular 2.0 的並沒有這個問題，雖然 Debug建議我把回傳的 Observable型態改為 any 但是這樣就無法讓 Editor 可以有正確的 Intelligence 選項。

後來Google 了一下在 stackoverflow 看到網友的解答才發現要在 http.post加上回傳的型態就可以正確編譯成功。

所以修改後的程式碼就會如下：

/** * @param tk: String. token content. * @returns : Observable TokenResult object. */ CheckToken(tk: string): Observable<TokenResult> { console.log(`tk: ${tk}`); const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/json' }) };
const body = { id: tk || '' }; console.log(body); return this.http.post<TokenResult>(this.url.checkTokenUrl, body, httpOptions) .pipe( catchError(this.handleError) ); }

這樣子編譯就會成功。

再回去追一下 Angular 這邊的 code 是有用泛型定義 post 回傳的型別。這樣撰寫是比較能夠明確回傳值跟我們外包覆的Function 回傳值類型一致也比較嚴謹。

post<T>(url: string, body: any | null, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: 'body'; ...... ......

REF:

• Stackoverflow