web-dev-qa-db-fra.com

Angular2 et TypeScript: erreur TS2322: le type 'Réponse' n'est pas assignable au type 'UserStatus'

Je joue avec Angular2 et TypeScript et ça ne se passe pas bien (ce serait si facile avec AngularJS). J'écris une petite application expérimentale pour tout comprendre et j'ai le composant suivant comme composant principal/supérieur ...

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, lorsque le composant de niveau supérieur est initialisé/initialisé, je souhaite appeler un service factice REST (/ restservice/userstatus) que j’ai configuré pour retourner un objet que j’ai transformé en à partir 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
    ) {

    }
}

Désormais, les propriétés appOS et formerName pourraient potentiellement être null et, lorsqu'elles répondent à la réponse dans mon service REST, 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
}

Ainsi, la structure de données envoyée par mon service bidon et le type d'objet correspondent, cependant, lorsque j'essaie d'assigner les données du service de repos au composant de la classe 'this.userStatus = data;', l'erreur suivante s'affiche: .... 

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

Je suppose que dans ma classe Type, je suis en train de faire un problème avec la définition des valeurs NULL. Est-ce que quelqu'un peut voir ce que je fais mal ou expliquer pourquoi je reçois l'erreur? Merci d'avance.

typescriptangular
16
Mike Sav

À mon avis, il est inutile de mettre du texte sur quelque chose qui provient de la réponse http ... Les types existent uniquement au moment de la compilation, pas au moment de l'exécution ... 

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

Utilisez 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
    );
25
Vlado Tesanovic

Ici, vous déclarez data comme type Response

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

et ici vous affectez une variable de type Response à une variable de type UserStatus

      this.userStatus = data;

donc l'erreur.

Pour éviter cela, il suffit de

this.userStatus = JSON.parse(data['_body']);
5
Günter Zöchbauer

Tu peux essayer 

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

M'a aidé 

1
Ian Samz