Angular2 et TypeScript: erreur TS2322: Le type 'Response' n'est pas assignable au type 'UserStatus'

Je suis en train de jouer avec Angular2 et Tapuscrits et il ne va pas bien (ce serait si facile d'en AngularJS). Je suis en train d'écrire une petite expérience app pour se familiariser avec tout ça et j'ai le composant suivant comme mon principal /de haut niveau composant...

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

Maintenant, quand le haut niveau composant est démarré /initialisé je veux faire un appel à un faux service REST (/restservice/userstatus) j'ai mis en place, qui renvoie un objet que j'ai fait dans un type comme si (ce qui est de 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
    ) {

    }
}

Maintenant la appOS et formerName propriétés pourraient potentiellement être null et quand on sert la réponse dans mon service REST ils sont l'objet JSON ressemble à ceci:

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

De sorte que la structure de données envoyé à partir de mon drôle de service et le Type de l'Objet correspondent cependant, lorsque j'essaie d'affecter les données à partir du Reste de la composante dans la classe 'this.userStatus = data;' j'obtiens l'erreur suivante....

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

Je suppose que dans mon Type de classe, je suis en train de faire quelque chose de mal avec la définition où les valeurs null sont concernées n'importe qui peut voir ce que je fais de mal ou d'expliquer pourquoi j'obtiens l'erreur. Merci à l'avance.

source d'informationauteur Mike Sav

  1. 22

    À mon avis, il est inutile de mettre de taper sur quelque chose qui vient de la réponse http... Types n'existe que dans le temps de compilation, pas de runtime...

    Au lieu de: 

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

    Utiliser ceci:

    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
    );
  2. 5

    Ici vous déclarez data type Response

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

    et ici vous attribuez à partir d'une variable de type Response à une variable de type UserStatus

          this.userStatus = data;

    ainsi, l'erreur.

    Pour éviter que tout ne

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