Angular2 und Typoskript: Fehler TS2322: Type 'Antwort' ist nicht zuweisbar Typ 'UserStatus'

Ich Spiele mit Angular2 und Typoskript und es ist nicht gut gelaufen ist (das wäre so einfach, AngularJS). Ich Schreibe ein kleines experiment-app in den Griff zu bekommen und ich habe 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 ist installiert /initialisiert möchte ich einen Anruf zu tätigen, um ein unechtes REST-service (/restservice/userstatus) ich einrichten, dass ein Objekt zurück, das ich gemacht habe, in einer Art, wie, so (dies ist aus 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
    ) {

    }
}

Nun die appOS und formerName Eigenschaften werden könnten null und beim servieren auf die Antwort in meinem REST-service, der JSON-Objekt sieht so aus:

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

Also die Datenstruktur gesendet von meinem phoney service und das Type-Objekt entsprechen, aber wenn ich versuche, ordnen Sie die Daten vom Rest-Service, um die Komponente in der Klasse 'this.userStatus = data;' bekomme ich folgende Fehlermeldung....

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

Ich nehme an, in meinem Typ-Klasse bin ich etwas falsch mit der definition, wo null-Werte betroffen sind, kann jeder sehen, was ich falsch mache, oder erläutern, warum bin ich immer die Fehler. Vielen Dank im Voraus.

InformationsquelleAutor der Frage Mike Sav | 2016-02-04

  1. 24

    Meiner Meinung nach gibt es keinen Punkt geben auf etwas, das kommt von http-response - ... - Typen gibt es nur im compile-Zeit, nicht in der runtime...

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

    InformationsquelleAutor der Antwort Vlado Tesanovic

  2. 5

    Hier erklären Sie data als Typ Response

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

    und Sie ordnen hier aus eine variable vom Typ Response auf eine variable vom Typ UserStatus

          this.userStatus = data;

    damit den Fehler.

    Zu vermeiden, tun Sie nur

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

    InformationsquelleAutor der Antwort Günter Zöchbauer

Schreibe einen Kommentar