今天要讓撈回來的資料，有物件導向的觀念

先說說Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output

TypeScript的github頁面明確指出它是一個JavaScript的超集，將撰寫出來的程式碼編譯成JavaScript

• TypeScript 既然稱為 TypeScript，重點就是將 JavaScript 加上 type
• 將弱型別但寫法超彈性的JavaScript轉變在開發時有型別檢查

以下列出TypeScript特色

• 由微軟開發的自由和開源的程式語言
• 為寫大型應用程式的複雜商業邏輯所設計
• 編譯時期就可以做型別的檢查，避免不必要撰寫錯誤
• 各種型別的相關技術就可使用到了 ex:物件導向、多型、泛型、強行別
• 語法參照ES5與ES6，且向下相容舊有的JavScript的語法，可以匯入第三方的JavaScript函式庫
• 兩大龍頭支援，微軟開發Typescript，Google採用TypeScript當作Angular官方語言

詳細資料與相關語法可參考

TypeScript 特色與歷史簡介
TypeScript新手入門

個人心得：
很多人初學Angular都會覺得要再學一套TypeScript很麻煩，不過可以這麼想：
如果你會C#、Java等物件導向程式語言，加上語法上相容JavaScript，各種用法都可以查JavaScript的相關資料，整體寫法上稍有一點不同而已，寫了就知道

目的很明確：讓撈回來的資料，都有強行別可操作，透過預編譯器進行型別檢查，確保你的程式是不會因為打錯字而浪費時間找bug，並且提升程式碼品質

• 首先根據資料型態
  

在_models裡面建一個youbike-station.ts

export class YoubikeStation {
  public sno: string; // 站點代號
  public sna: string; // 中文場站名稱
  public tot: string; // 場站總停車格
  public sbi: string; // 可借車位數
  public sarea: string; // 中文場站區域
  public mday: string; // 資料更新時間
  public lat: string; // 緯度
  public lng: string; // 經度
  public ar: string; // 中文地址
  public sareaen: string; // 英文場站區域
  public snaen: string; // 英文場站名稱
  public aren: string; // 英文地址
  public bemp: string; // 可還空位數
  public act: string; // 場站是否暫停營運
}

建好YoubikeStation.ts，場站的class後

以下開始練習，拿到一包資料後可以怎麼來操作資料

• 開始修改上一篇的get資料function

tri001.component.ts

 public uBike: Array<YoubikeStation> = new Array<YoubikeStation>(); //接call後端api所得到的資料
 public selectedData: YoubikeStation; //所選的那一筆資料
 public uBikeData: YoubikeStation = new YoubikeStation(); // 關鍵要new起來
 
 ngOnInit() {
    this.getUbikeData();
  }
getUbikeData() {
    this.programService.getUbikeData().subscribe(
      (response: any) => {
        this.uBike = response.result.records, //使用這包有型別的空陣列去接
      },
      (error: HttpErrorResponse) => this.programService.HandleError(error)
    );
  }
  //***感受到強行別的好處
getUikeDataStation(item: YoubikeStation) {
    this.uBikeData = item;//將選定的資料給予空的uBike物件
    this.programService.openSnackBar(item.lat, item.lng); //點下去會有強行別屬性讓你選擇
  }

強型別的好處讓你方便操作參數，這裡示範把參數丟到SnackBar顯示出來

給錯物件屬性的話，預編譯的時候就會compile Error
提醒你打錯屬性啦!!!

ERROR in src/app/programs/tri001/tri001.component.ts(62,53): error TS2339: Property 'name' does not exist on type 'YoubikeStation'.

• 在前端頁面撰寫一個下拉式選單，並在選項中顯示站點代號與場站名稱

tri001.component.html

<div>
  <mat-form-field>
    <mat-select [(ngModel)]="selectedData" (ngModelChange)="getUikeDataStation(selectedData)" placeholder="請選擇一個場站">
      <mat-option *ngFor="let u of uBike " [value]="u"> //這邊value值給定了選定的那一包資料
        {{u.sno}} {{u.sna}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

• 最後讓選擇的哪幾筆場站資料，都顯示在網頁前端

<ul>
  <li>場站名稱：{{uBikeData.sna}}</li>

  <li>總停車格：{{uBikeData.tot}}</li>

  <li>可借車位數：{{uBikeData.sbi}}</li>

  <li>資料更新時間：{{uBikeData.mday}}</li>
</ul>

開發的過程中html中也可以有強型別的選擇囉

• 成果即為透過下拉式選單查詢哪個場站，目前的YouBike租車狀況