typescript - 如何将响应从http.get映射到Angular 2中类型对象的新实例

这个问题已经有了答案：
How do I cast a JSON object to a typescript class
18答
我试图了解如何使用http.get和Angular2中的Observables将服务调用的结果映射到对象。
看看这个Plunk
在getpersonwithgetproperty方法中，我希望返回personwithgetproperty类型的可观测值。然而！我无法访问属性全名。
我想我必须创建一个PersonWithGetProperty类的新实例，并使用类构造函数将响应映射到这个新对象。但是在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()));
    }
}

最佳答案

问题是，您正在强制解析的json像类一样工作。
应用<PersonWithGetProperty>并不是真正创建PersonWithGetProperty的新实例，它只是告诉编译器关闭，因为您知道自己在做什么。如果要实际创建一个实例，则需要用PersonWithGetProperty构造它。
幸运的是，您已经完成了一半，只需在解析输出之后再添加一个new：

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

编辑
要实现这一点，您需要确保正在为RXJS 5使用：

import 'rxjs/add/operator/map'

如果您想要将来的安全，您应该使用rxjs 5的更高版本中引入的map语法

// Either
import {map} from 'rxjs/operators'

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