typescriptクラスのさまざまなデータメンバーの正確な必要性は何ですか

Question

次のクラスを持つAngular 2プロジェクトがあります。

Bike.list.service.tsクラス

import {Component} from '@angular/core'; 
import {Injectable} from '@angular/core'; 
import {Http, HttpModule,Response} from '@angular/http'; 
import {Bike} from './bike.model'; 
import 'rxjs/Rx'; 
import {Observable}  from 'rxjs/Observable'; 

@Injectable() 
export class BikeService { 
    private _Url = 'https://feeds.bikesharetoronto.com/stations/stations.json'; 

    constructor(private _http:Http) { } 

    getStations(): Observable<Bike[]> { 
    return this._http.get(this._Url) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body.stationBeanList || { }; 
    } 

    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    return Observable.throw(errMsg); 
    } 
} 

Bike.component.ts

import {Component, OnInit} from '@angular/core'; 
import {Bike} from './bike.model'; 
import {BikeService} from './bike.list.service'; 

@Component({ 
    selector:'bike-stations', 
    templateUrl:'../app/bike/bike-list.view.html', 
    providers:[BikeService] 
}) 

export class BikeComponent implements OnInit { 

    stations:Bike[]; 
    errorMessage:any; 
    mode = 'Observable'; 

    constructor(private _bikeListService: BikeService) { 
    this.stations=[]; 
    } 

    ngOnInit() { 
    this.getStations(); 
    } 

    getStations() { 
    this._bikeListService.getStations().subscribe(
     (stations: any) => this.stations = stations, 
     (error: any) => this.errorMessage = error 
    ); 
    } 
} 

Bike.model.ts

export class Bike{ 

    private id:number; 
    private stationName:string; 
    private availableDocks:number; 
    private totalDocks:number; 
    private latitude:number; 
    private longitude:number; 
    private statusValue:number; 
    private statusKey:number; 
    private status:string; 
    private availableBikes:number; 
    private stAddress1:string; 
    private stAddress2:string; 
    private city:string; 
    private postalCode:string; 
    private location:string; 
    private altitude:string; 
    private testStation:boolean; 
    private lastCommunicationTime:Date; 
    private is_renting:boolean; 
    private landMark:string; 

    constructor(bike_info: Array<any>){ 

    this.id=bike_info['id']; 
    this.stationName=bike_info['stationName']; 
    this.availableDocks=bike_info['availableDocks']; 
    this.totalDocks=bike_info['totalDocks']; 
    this.latitude=bike_info['latitude']; 
    this.longitude=bike_info['longitude']; 
    this.statusValue=bike_info['statusValue']; 
    this.statusKey=bike_info['statusKey']; 
    this.status=bike_info['status']; 
    this.availableBikes=bike_info['availableBikes']; 
    this.stAddress1=bike_info['stAddress1']; 
    this.stAddress2=bike_info['stAddress2']; 
    this.city=bike_info['city']; 
    this.postalCode=bike_info['postalCode']; 
    this.location=bike_info['location']; 
    this.altitude=bike_info['altitude']; 
    this.testStation=bike_info['testStation']; 
    this.lastCommunicationTime=bike_info['lastCommunicationTime']; 
    this.is_renting=bike_info['is_renting']; 
    this.landMark=bike_info['landMark']; 
    } 
} 

自転車-するlist.html

<div> 
    <h1>Stations List...</h1> 

    <div *ngFor="let station of stations"> 
    <td> 
     <div>Id: {{station.id}}</div> 
     <div>Station Name: {{station.stationName}}</div> 
     <div>availableDocks: {{station.availableDocks}} </div> 
     <div>totalDocks: {{station.totalDocks}} </div> 
     <div>latitude: {{station.latitude}} </div> 
     <div>longitude: {{station.longitude}} </div> 
     <div>statusValue: {{station.statusValue}} </div> 
     <div>statusKey: {{station.statusKey}} </div> 
     <div>status: {{station.status}} </div> 
     <div>availableBikes: {{station.availableBikes}} </div> 
     <div>stAddress1: {{station.stAddress1}} </div> 
     <div>stAddress2: {{station.stAddress2}} </div> 
     <div>city: {{station.city}} </div> 
     <div>postalCode: {{station.postalCode}} </div> 
     <div>location: {{station.location}} </div> 
     <div>altitude: {{station.altitude}} </div> 
     <div>testStation: {{station.testStation}} </div> 
     <div>lastCommunicationTime: {{station.lastCommunicationTime}} </div> 
     <div>is_renting: {{station.is_renting}} </div> 
     <div>landMark: {{station.landMark}} </div> 
    </td> 
    <br><br><br> 
    </div> 
</div> 

私の質問は - ときに観察戻りデータ、それは自転車に割り当てられてきている[]クラスと「ステーションが」（タイプは[]自転車である）Bikecomponentクラスで宣言を取得しますヒーロークラスのすべてのデータメンバーのJSONデータ。

しかし、Bikeクラスからいくつかのデータメンバーを削除すると、（ステーションタイプの）Bike []配列に影響せず、HTMLで指定されたすべての属性を出力します。

それで、Bikeモデルクラスの多数のデータメンバーを宣言する必要はありますか？誰も私に説明を与えることができますか？

Answer 1

この特定のシナリオでは、typescriptのクラスを使用すると、jsonを入力できます。これにはいくつかの利点があります.1つは、コーディング時にプロパティのタイプを見ることができ、間違いからあなたを救います。少しコード。実行時に見つけたように、typescriptはjsonの構造を気にしないので、どんなタイプのデータであっても、どんなタイプのデータでもそれを割り当てます。最終的にtypescriptが実行時にjavascriptであるため、期待される動作です。

ただし、タイプコピーの利点の一部は、コーディングやトランスリンギング時に発生するため、これらの手順でメリットを検討することをおすすめします。

あなたがtypescriptでコード化するほど強くないと思うなら、es6を試すことができます。