Angular2 und TypeScript: Fehler TS2322: Typ 'Response' kann nicht dem Typ 'UserStatus' zugewiesen werden

Question

Ich spiele mit Angular2 und TypeScript und es läuft nicht gut (das wäre in AngularJS so einfach). Ich schreibe ein kleines Experiment App mit ihm in den Griff zu bekommen alle, und ich habe die folgende Komponente als mein Haupt/Top-Level-Komponente ...

import {Component, OnInit} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {UserData} from './services/user-data/UserData'; 
import {Home} from './components/home/home'; 
import {UserStatus} from './types/types.ts'; 
import {Http, Headers, Response} from 'angular2/http'; 

@Component({ 
    selector: 'app', // <app></app> 
    providers: [...FORM_PROVIDERS], 
    directives: [...ROUTER_DIRECTIVES], 
    template: require('./app.html') 
}) 
@RouteConfig([ 
    {path: '/', component: Home, name: 'Home'}, 
    // more routes here.... 
]) 

export class App { 

    userStatus: UserStatus; 

    constructor(public http: Http) { 
    } 

    ngOnInit() { 

     // I want to obtain a user Profile as soon as the code is initialised 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     this.http.get('/restservice/userstatus', {headers: headers}) 
      .subscribe(
      (data: Response) => { 
       data = JSON.parse(data['_body']); 
       this.userStatus = data; 
      }, 
      err => console.log(err), // error 
      () => console.log('getUserStatus Complete') // complete 
     ); 
    }  
} 

Nun, wenn die Top-Level-Komponente Bootstrap ist/initialisiert Ich möchte um einen Anruf zu einem phoney REST-Service (/ restservice/Userstatus) ich eingerichtet, dass ein Objekt zurückgibt, die ich in eine Art wie so gemacht haben (dies aus import {UserStatus} from './types/types.ts' ist):

export class UserStatus { 

    constructor (
     public appOS?: any , // can be null 
     public firstName: string, 
     public formerName?: any, // can be null 
     public fullPersId: number, 
     public goldUser: boolean, 
     public hasProfileImage: boolean, 
     public hideMoblieNavigationAndFooter: boolean, 
     public persId: string, 
     public profileName: string, 
     public profilePicture: string, 
     public showAds: boolean, 
     public siteId: number, 
     public url: string, 
     public verified: boolean 
    ) { 

    } 
} 

Jetzt

die appOS und formerName Eigenschaften könnten möglicherweise null und wenn die Antwort in meinem REST-Dienst serviert werden sie sind, sieht das JSON-Objekt wie folgt:

{ 
    appOS: null, 
    firstName: "Max", 
    formerName: null, 
    fullPersId: 123456789, 
    goldUser: true, 
    hasProfileImage: true, 
    hideMoblieNavigationAndFooter: false, 
    persId: "4RUDIETMD", 
    profileName: "Max Dietmountaindew", 
    profilePicture: "http://myurl.com/images/maxdietmountaindew.jpg", 
    showAds: true, 
    siteId: 1, 
    url: "/profile/maxdietmountaindew", 
    verified: true 
} 

die Datenstruktur Also von meinem phoney Service und das Typ Objekt Spiel jedoch gesendet, wenn ich versuche, die Daten aus dem Rest Service-Komponente in der Klasse 'this.userStatus = data;' I zuweisen die folgenden Fehler ....

"error TS2322: Type 'Response' is not assignable to type 'UserStatus'. 
    Property 'appOS' is missing in type 'Response'." 

ich in meiner Art Klasse gehe ich davon etwas falsch mit der Definition täte wo nulls betroffen sind, kann jeder sehen, was ich tue, falsch oder erklären, warum ich die Störung erhalten. Danke im Voraus. Hier

Answer 1

Meiner Meinung nach gibt es keinen Punkt Typen auf etwas zu setzen, die von http-Antwort kommt ... Arten gibt es nur in der Kompilierung, nicht im laufenden Betrieb ...

Statt:

this.http.get('/restservice/userstatus', {headers: headers}) 
     .subscribe(
     (data: Response) => { 
      data = JSON.parse(data['_body']); 
      this.userStatus = data; 
     }, 
     err => console.log(err), // error 
     () => console.log('getUserStatus Complete') // complete 
    ); 

verwenden:

this.http.get('/restservice/userstatus', {headers: headers}) 
.map((data: any) => data.json()) 
.subscribe(
     (data: any) => { 
      this.userStatus = data; 
     }, 
     err => console.log(err), // error 
     () => console.log('getUserStatus Complete') // complete 
    ); 

Answer 2

Sie erklären data als Typ Response

(data: Response) => { // <== 
    data = JSON.parse(data['_body']); 

und hier weisen Sie von einer Variablen vom Typ Response auf eine Variable vom Typ UserStatus

 this.userStatus = data; 

somit den Fehler.

Um zu vermeiden, dass nur tun

this.userStatus = JSON.parse(data['_body']);