Observable <{}>タイプに割り当てられないObservable <SomeType[]>

Question

私はAngular2とTypescriptを学んでいます。私はangular.ioのHeroesチュートリアルで作業していますが、これをASP.Netから変換しているプロジェクトに適用しています。私は理解していないことが原因であると思う問題にぶつかりましたが、チュートリアルの関連する部分と一致しています。

import { Injectable } from '@angular/core'; 
import {RiskListSummary} from '../Models/RiskListSummary'; 
import { Observable } from 'rxjs/Rx'; 
import { Http, Response } from '@angular/http'; 

@Injectable() 
export class RiskAssessmentListService { 

    constructor(private http : Http) {} 

    private serviceUrl = "http://myserviceurl/"; 

    getRisks(): Observable<RiskListSummary[]> { 
     return this.http.get(this.serviceUrl) 
      .map(this.extractData()) 
      .catch(this.handleError()); 
    } 

    private extractData(res: Response) { 
     if (res.status < 200 || res.status >= 300) { 
      throw new Error('Bad response status: ' + res.status); 
      } 
     let body = res.json(); 
     return body.data || { }; 
    } 

    private handleError (error: any) { 
     let errMsg = error.message || 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
} 

私は "（this.serviceUrl）this.http.getを返す" 行に次のエラーを取得しています：

Error:(20, 16) TS2322: Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'RiskListSummary[]'. Property 'length' is missing in type '{}'.

それが違いをした場合、私は（webstormを使用しています最新のバージョン）、しかし、私はこのエラーがtypescriptコンパイラから直接来ていると思います。私はrxjsの入力ファイルが必要かもしれないと思っていましたが、チュートリアルでは使用していないので、 "入力検索"で見つけたものはどれも違いがありません

以下はパッケージからの依存関係です。 JSON：

"dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 

    "systemjs": "0.19.27", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12" 

Answer 1

私はあなたの問題がここにあることを考える：

getRisks(): Observable<RiskListSummary[]> { 
    return this.http.get(this.serviceUrl) 
    .map(this.extractData()) <== passing result of function 
    .catch(this.handleError()); <== passing result of function 
} 

あなただけfunction参照渡して使用することができます

getRisks(): Observable<RiskListSummary[]> { 
    return this.http.get(this.serviceUrl) 
    .map(this.extractData) 
    .catch(this.handleError); 
} 

いますが、thisを失うことになるこの方法を。

それともthisを保持するbindメソッドを使用することができます。

getRisks(): Observable<RiskListSummary[]> { 
    return this.http.get(this.serviceUrl) 
    .map(this.extractData.bind(this)) 
    .catch(this.handleError.bind(this)); 
} 

しかし、あなたがlose type checkingをでしょう。

私はlexical thisを使用できるようにarrow機能を活用します：

getRisks(): Observable<RiskListSummary[]> { 
    return this.http.get(this.serviceUrl) 
    .map((res) => this.extractData(res)) 
    .catch((err) => this.handleError(err)); 
} 

それthisなしでは、呼び出しが行われる機能を指します。

Answer 2

getRisks() FNによると、あなたはObservable<RiskListSummary[]>を返すように種類があります。ただし、コードではbody.data || {}が返されます。 RiskListSummary []をbody.dataにインターフェイスする必要があると思います。

Answer 3

私は同じ問題を抱えていましたが、私が上記のようにどのように変更しても、それはまだ動作しません。私の大学はこのmap, catch defination as VSC prompted

を見つけるまでその適切な変更は、私は活字体に新しいです

getRisks(): Observable<RiskListSummary[]> { 
    return this.http.get(this.serviceUrl) 
    .map<RiskListSummary[]>(this.extractData) 
    .catch<RiskListSummary[]>(this.handleError); 
} 

（タイプを追加し、次の場所をキャスト）のようにする必要があります。ので、[メソッドシグネチャ]この種のは本当に私の頭の上にハンマーを与える:(

をしかしついに、それは働いた:)

Answer 4

を活字体は、いつもここのように型チェックコンパイルエラーを与えるコンパイラ・ツールであり、この場合、getRiskメソッドは、RiskListSummary型のObservableを返すように指定して、ツールがこのメソッドから期待されるものを認識し、subscribeメソッドで使用されたときに型の安全性をチェックするようにします。