Angular2 e TypeScript: errore TS2322: il tipo 'Response' non è assegnabile al tipo 'UserStatus'

Question

Sto giocando con Angular2 e TypeScript e non sta andando bene (questo sarebbe così facile in AngularJS). Sto scrivendo un piccolo esperimento app per fare i conti con tutto e ho il seguente componente come il mio componente livello principale/top ...

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

Ora, quando il componente di livello superiore è bootstrap/inizializzato voglio per effettuare una chiamata ad un servizio REST fasulla (/ restservice/stato_utente) ho creato che restituisce un oggetto che ho fatto in un tipo in questo modo (questo è da import {UserStatus} from './types/types.ts'):

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 
    ) { 

    } 
} 

Ora il appOS e formerName le proprietà potrebbero potenzialmente essere null e al momento di servire la risposta nel mio servizio REST essi sono, l'oggetto JSON assomiglia così:

{ 
    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 
} 

Quindi la struttura dati inviata dal mio servizio fasulla e la partita tipo di oggetto tuttavia quando provo ad assegnare i dati dal servizio REST al componente nella classe 'this.userStatus = data;' I il seguente errore ....

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

presumo nella mia classe tipo che sto facendo qualcosa di sbagliato con la definizione in cui i valori nulli sono interessati chiunque può vedere quello che sto facendo male o spiegare perché sto ottenendo l'errore. Grazie in anticipo.

Answer 1

A mio parere non c'è alcun punto di mettere tipo su qualcosa che viene dalla risposta http ... Tipi esiste solo in tempo di compilazione, non in fase di esecuzione ...

Invece di:

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

Utilizzare questa:

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

Qui si dichiara data come tipo Response

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

e qui si assegna da una variabile di tipo Response ad una variabile di tipo UserStatus

 this.userStatus = data; 

così l'errore.

Per evitare che basta fare

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