Come mappare una risposta da http.get a una nuova istanza di un oggetto digitato in Angular 2

Question

Sto cercando di capire come mappare il risultato da una chiamata di servizio a un oggetto utilizzando http.get e Observables in angolare 2.

Date un'occhiata a questo Plunk

nel metodo getPersonWithGetProperty mi aspetto di tornare un'osservabile di tipo PersonWithGetProperty. Però! Non riesco ad accedere alla proprietà fullName. Immagino che dovrei creare una nuova istanza della classe PersonWithGetProperty e mappare la risposta a questo nuovo oggetto usando il costruttore della classe. Ma come si fa nel metodo getPersonWithGetProperty?

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 

export class PersonWithGetProperty { 
    constructor(public firstName: string, public lastName: string){} 

    get fullName(): string { 
    return this.firstName + ' ' + this.lastName; 
    } 
} 

@Injectable() 
export class PersonService { 
    constructor(private http: Http) { 
    } 

    getPersonWithGetProperty(): Observable<PersonWithGetProperty> { 
     return this.http.get('data/person.json') 
     .map((response: Response) => <PersonWithGetProperty>(response.json())); 
    } 
} 

Answer 1

Il problema è che si sta costringendo il json analizzato a comportarsi come la classe.

L'applicazione di <PersonWithGetProperty> non sta creando una nuova istanza di PersonWithGetProperty ma sta solo dicendo al compilatore di stare zitto perché sai cosa stai facendo. Se si desidera creare effettivamente un'istanza PersonWithGetProperty, è necessario costruirla con new.

Fortunatamente si è già a metà strada, basta aggiungere un altro map dopo aver analizzato l'output:

@Injectable() 
export class PersonService { 
    constructor(private http: Http) { 
    } 

    getPersonWithGetProperty(): Observable<PersonWithGetProperty> { 
     return this.http.get('data/person.json') 
     .map((response: Response) => response.json()) 
     .map(({firstName, lastName}) => new PersonWithGetProperty(firstName, lastName)); 
    } 
}