typescript - promesas - servicios angular 4

Observable<{}> no se puede asignar al tipo Observable<SomeType[]>

Question

Estoy aprendiendo Angular2 y mecanografiado. Estoy trabajando a través del tutorial Heroes en angular.io, pero aplicándolo a un proyecto que estoy convirtiendo desde ASP.Net. Me he encontrado con un problema que creo que se debe a mi falta de comprensión, aunque en la medida en que puedo verlo coincide con lo que hace la parte relevante del tutorial.

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

Recibo el siguiente error en la línea "return this.http.get (this.serviceUrl)":

Error: (20, 16) TS2322: El tipo ''Observable <{}>'' no se puede asignar al tipo ''Observable''. El tipo ''{}'' no se puede asignar al tipo ''RiskListSummary []''. Falta la ''longitud'' de la propiedad en el tipo ''{}''.

Si hace una diferencia, estoy usando webstorm (última versión), pero creo que este error viene directamente del compilador de caracteres. Estaba pensando que tal vez necesito un archivo de mecanografía para rxjs, pero el tutorial no usa uno, y ninguno de los que encontré con una "búsqueda de tipificación" hizo una diferencia.

Las siguientes son mis dependencias de package.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

Creo que tu problema se encuentra aquí:

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

Podrías usar solo pasando la referencia de la function :

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

Pero así perderás this .

O podrías usar el método de bind para retener this :

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

Sin embargo, perderá la comprobación de tipo .

Aprovecharía arrow funciones de arrow para poder usar este léxico :

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

Sin él, this apuntará a la función donde se realiza la llamada.

Answer 2

De acuerdo con getRisks() fn, son tipos para devolver Observable<RiskListSummary[]> . Sin embargo, en su código, está devolviendo body.data || {} body.data || {} . Creo que necesita relacionar su RiskListSummary [] con su body.data.

Answer 3

Encontré el siguiente: faltaba AccessTokens. Entonces, hice el cambio y funcionó: en su modelo (en mi caso, País), edite el archivo y cambie de:

export interface CountryInterface {
  "id"?: any;
  "name": string;
  "order"?: number;  
}

export class Country implements CountryInterface {
  "id": any;
  "name": string;
  "order": number;
   ....
}

A:

export interface CountryInterface {
  "id"?: any;
  "name": string;
  "order"?: number;
  accessTokens: any[];
}

export class Country implements CountryInterface {
  "id": any;
  "name": string;
  "order": number;
  accessTokens: any[];
  ...
}

Answer 4

Tuve el mismo problema, sin embargo, no importa cómo haya cambiado como se mencionó anteriormente, todavía no funciona. Hasta que mi universidad haya encontrado este mapa, captura la definición como lo solicitó VSC

por lo que el cambio adecuado debería ser similar (agregue el tipo de lanzamiento en el siguiente lugar)

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

Soy nuevo en TypeScript. así que este tipo de [firma de método] realmente me da un martillo en la cabeza :(

Pero finalmente funcionó :)

Answer 5

Typescript es una herramienta de compilación, que siempre dará un error de compilación de verificación de tipo, ya que aquí, en este caso, el método getRisk debe especificar que devuelve Observable de tipo RiskListSummary, para que la herramienta reconozca qué se espera de este método y verifique el tipo Seguridad cuando se utiliza en el método de suscripción.