Observable<{}> not assignable to type Observable<SomeType[]>

I think that your problem is located here:

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

You could use just passing function reference:

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

but this way you will lose this.

Or you could use bind method to retain this:

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

however you will lose type checking.

I would leverage arrow functions to be able to use lexical this:

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

Without it, the this variable will point to the function where the call is made, instead of the instance that contains getRisks().

I had same problem, however no matter how I changed as above mentioned,It still not working. Until my college found this map, catch defination as VSC prompted

so the proper change should be like (add type cast the following place)

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

I am new to TypeScript. so this kind of [method signature] really give me a hammer on the head :(

But finally it worked out :)