Angular2 и TypeScript: ошибка TS2322: Тип 'Response' не может быть присвоен типу 'UserStatus'

Я играю с Angular2 и TypeScript, и это не очень хорошо (это было бы так легко в AngularJS). Я пишу небольшое экспериментальное приложение, чтобы справиться со всем этим, и у меня есть следующий компонент в качестве компонента основного/верхнего уровня...

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

Теперь, когда компонент верхнего уровня загружается/инициализируется, я хочу сделать звонок на ложную услугу REST (/restservice/userstatus), которую я создал, которая возвращает объект, который я сделал, в такой тип (это от 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
    ) {

    }
}

Теперь свойства appOS и formerName могут быть null и при обслуживании ответа в моей службе REST они являются объектами JSON, которые выглядят так:

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

Таким образом, структура данных, отправленная из моего фальшивого сервиса и сопоставления типа, однако, когда я пытаюсь назначить данные из службы Rest для компонента в классе 'this.userStatus = data;', я получаю следующую ошибку....

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

Я предполагаю, что в моем классе типа я делаю что-то не так с определением, где встречаются нули, может ли кто-нибудь увидеть, что я делаю неправильно, или объяснить, почему я получаю ошибку. Спасибо заранее.

Ответ 1

По-моему, нет смысла ставить тип на что-то, исходящее из ответа HTTP... Типы существуют только во время компиляции, а не во время выполнения...

Вместо:

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

Используйте это:

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

Здесь вы объявляете data как тип Response

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

и здесь вы назначаете из переменной типа Response переменную типа UserStatus

      this.userStatus = data;

таким образом, ошибка.

Чтобы избежать этого, просто

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

Ответ 3

Ты можешь попробовать

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

Выручил меня