同步发表到驴形笔记

前情题要

在上这一篇中我们成功让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