javascript - What is the exact need of various data members of a typescript class -

i have angular 2 project following classes.

bike.list.service.ts class

import {component} '@angular/core'; import {injectable} '@angular/core'; import {http, httpmodule,response} '@angular/http'; import {bike} './bike.model'; import 'rxjs/rx'; import {observable}     '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} '@angular/core'; import {bike} './bike.model'; import {bikeservice} './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'];   } } 

bike-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> 

my question is- when observable returns data, getting assigned bike[] class , 'stations'(type bike[]) declared in bikecomponent class gets json data data members of hero class.

however, if delete data members bike class, doesn't affect 'stations'(of type bike[]) array , still prints attributes specified in html.

so need of declaring many numbers of data members in bike model class? can give me explanation?

in particular scenario classes in typescript allow type json, can have benefits, 1 can see types of properties when coding , can save mistakes, clarify little bit code. spotted @ runtime typescript doesn't care structure of json, anyway assign whatever data comes in regardless of whatever type have , expected behavior because @ end typescript javascript @ runtime.

but of typescript benefits comes when coding or transpiling, recommend of benefits @ steps.

if think benefits aren't strong enough force code on typescript can try es6.