[day27][後端][實作] 引入Typescipt，webpack的loader（下）

前情題要

在上這一篇中我們成功讓webpack可以吃下".ts"檔案，這一篇開始講解基本typescript可以幹嘛？幸運的是鐵人賽已經有一篇非常優秀的typescript講解並深入淺出的說明了，他幫助我再走歪的道路走了超遠！讓 TypeScript 成為你全端開發的 ACE！，這有出書但我買了還沒看= ="

這邊就試著定義axios回來的資料，見識看看ts的威力吧！（ts很好用，強烈建議試完下面的定義後也去爬完那個系列！）

把(http://localhost:3000/air )的json資料複製下來整理一下吧，可以到這邊貼上(https://codebeautify.org/jsonviewer )。這樣就看到該筆資料的實際形狀了，接著就去定義資料並然後整理好吐出去！

src\server\routes\air.ts

略
type airRawData = {
  success : boolean,
  result : {
    resource_id : string,
    fields : Array<any>,
    records : Array<any>,
    limit	:	number,
    offset	:	number,
    total	:	number,
  }
}
module.exports = router;

有看到嗎？將回傳的資料依序宣告完成，晚一點整理資料實就能夠輕鬆用自動完成呼叫！甚至他會告知不存在，不允許追加鍵值等等而外好處（壞處？）。好的typescript應該盡可能完整定義，不要有any甚至單純說他是一個object這樣的設定

略
type airRawData = {
  success : boolean,
  result : {
    resource_id : string,
    fields : Array<airFieldTitle>,
    records : Array<airSiteData>,
    limit	:	number,
    offset	:	number,
    total	:	number,
  }
}
type airFieldTitle = {
  type: string,
  id: string | number
}
type airSiteData = {
  SiteName	: string,
  County	: string,
  AQI	: string,
  Pollutant	: string,
  Status	: string,
  SO2	: string,
  CO	: string,
  CO_8hr	: string,
  O3	: string,
  O3_8hr	: string,
  PM10	: string,
  "PM2.5": string,
  NO2	: string,
  NOx	: string,
  NO	: string,
  WindSpeed	: string,
  WindDirec	: string,
  PublishTime	: string,
  "PM2.5_AVG" : string,
  PM10_AVG	: string,
  SO2_AVG	: string,
  Longitude	: string,
  Latitude	: string,
  SiteId	: string,
}
module.exports = router;

甚至如果你知道內部的值是固定的可以更進一步連"string"也定義掉！

略
type airFieldTitle = {
  type: string,
  id: "SiteName" |
      "County" |
      "AQI" |
      "Pollutant" |
      "Status" |
      "SO2" |
      "CO" |
      "CO_8hr" |
      "O3" |
      "O3_8hr" |
      "PM10" |
      "PM2.5" |
      "NO2" |
      "NOx" |
      "NO" |
      "WindSpeed" |
      "WindDirec" |
      "PublishTime" |
      "PM2.5_AVG" |
      "PM10_AVG" |
      "SO2_AVG" |
      "Longitude" |
      "Latitude" |
      "SiteId" 
}
略

接著將獲取的資料定義成對應資料，然後定義好吐出去的資料

略
router.get('/', async function(req, res, next) {
  let result = await axios.get('https://opendata.epa.gov.tw/webapi/api/rest/datastore/355000000I-000259?sort=SiteName&offset=0&limit=1000');
  let data = result.data as airRawData;
  let outData : Array<airSiteData> = data.result.records;
  res.json(outData);
});
略

這樣最簡單的ts使用說明就完成了，但是TS還可以定義方法定義class等等！對於想用強語言並讓開發更有規範的人真的強烈建議去看一下讓 TypeScript 成為你全端開發的 ACE！，能幫你在typescript的路上越走越遠阿！

githubday27