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

Question

Я играю с 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;' I получить следующее сообщение об ошибке ....

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

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

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

Answer 2

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

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

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

 this.userStatus = data; 

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

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

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