Angular 2 - хорошая практика при преобразовании ответа в угловую модель

Что является хорошей практикой для преобразования ответа (например, для данных json) в угловую модель? Итак, другими словами, как добиться функциональности Auto Mapper в angular 2.

team.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Team } from './team.model';

@Injectable()
export class TeamService {

  constructor(private _http: Http) {
  }

  public GetAllTeams(): Promise<Team[]> {
    return this._http.get('/app/teams/shared/team.data.json')
                    .toPromise()
                    .then(respons => <Team[]> respons.json().data as Team[])
                    .then(data => { return data; });
  }
}

team.data.json

{
    "data": [
        {"id": "1", "name": "Team 1", "otherProperty" : "S1"},
        {"id": "2", "name": "Team 2", "otherProperty" : "S2"},      
    ]
}

team.model.ts

export class Team {

  private _id: string;
  public get id(): string {
    return this._id;
  }

  public set id(value: string) {
    this._id = value;
  }

  private _name: string;
  public get name(): string {
    return this._name;
  }

  public set name(value: string) {
    this._name = value;
  }

  private _icon: string;
  public get icon(): string {
    return this._icon;
  }

  public set icon(value: string) {
    this._icon = value;
  }

}

метод GetAllTeams должен вернуться Team объекты. Я знаю, что могу создать фабрику, которая получает данные json и возвращает объекты Array of Team, но после прочтения этой статьи https://angular.io/docs/ts/latest/guide/dependency-injection.html (раздел car-factory.ts), кажется, что это плохая картина. Благодарю.

1 ответ

На самом деле, вам не нужно создавать класс как модель, если вам нужна строгая типизация. Вы можете использовать интерфейс вместо.

export interface Team {
    id: string;
    name: string;
    icon: stirng;
    someOtherProperty: [];
}

Преимущество использования интерфейса состоит в том, что вы получаете строгую типизацию, в то время как для интерфейса не генерируется код, а класс генерирует дополнительный код.

То, как вы сейчас выполняете конвертацию ответов, я считаю хорошим, ИМХО.

public GetAllTeams(): Promise<Team[]> {
    return this._http.get('/app/teams/shared/team.data.json')
                .toPromise()
                .then(respons => respons.json())
                .then(x => x.data);
}

Всегда помните, что TypeScript - это Javascript + сильный тип. Не пытайтесь внести в него всю ОО-реализацию (хотя иногда это заманчиво).

Другие вопросы по тегам