# 🏅 Day 16 - TodoList API 動手做做看！


學到個階段後，吸收再多知識，也比不上自己挽起袖子主動輸出寫程式！

所以這裡六角請 Ray 出了一個有 JWT 註冊登入的 TodoList API 幫助大家練習~

1. API 網址：https://todolist-api.hexschool.io/
2. API 文件：https://todolist-api.hexschool.io/doc/

通通做好做滿，新增、編輯、刪除應有盡有，讓同學們可從中思考，如果有相同程式邏輯的程式碼，該如何進行優化~

下方我也寫了四種範例，提供給不同階段的開發者進行參考

## todo 範例

1. [純 JS 寫法，並使用原生 fetch API](https://codepen.io/hexschool/pen/dyrREVm)
2. [純 JS 寫法，使用 async 與 await，套件使用 axios、sweetalert 彈跳視窗](https://codepen.io/hexschool/pen/zYbzQaz)
3. [TypeScript 版本，有使用到 interface](https://codepen.io/hexschool/pen/wvOeVWP)
4. [TypeScript + Vite 版本，將 try、catch 進行優化](https://github.com/gonsakon/typescript-todo-sample)、[GitHub Page 線上 Demo](https://gonsakon.github.io/typescript-todo-sample/)

第三個範例備註：在使用第三方套件時，可檢視這裡的[宣告檔案](https://willh.gitbook.io/typescript-tutorial/basics/declaration-files#declare-var)

為確保 TypeScript 能理解 CDN 的 `axios`、`sweetalet`，[宣告語句](https://willh.gitbook.io/typescript-tutorial/basics/declaration-files#shen-me-shi-xuan-gao-yu-ju)來解決，但並非是一個好的作法

目前熱門的套件，都有支援 TypeScript [第三方宣告檔案](https://willh.gitbook.io/typescript-tutorial/basics/declaration-files#di-san-fang-xuan-gao-dang-an)，故後面的範例程式碼，則就會用打包工具來進行範例介紹

## 開發題

請嘗試用以下 API 功能，開發 TodoList API 介面開發，並思考此應用導入 TypeScript 的可行性

API 網址：https://todolist-api.hexschool.io/
API 文件：https://todolist-api.hexschool.io/doc/

### 推薦優化的細節

1. 先思考將常見的資料格式，來抽出可讀性高的 `interface`、`type`
2. 將 API 的 `request`、`response` 尋找共通性，並設計 `interface`、`type` 來整合
3. 試著導入有支援 TypeScript 的第三方套件，除了範例的 axios、sweetalert 外，也可試試看表單驗證套件
4. 嘗試用泛型，將程式碼重複性高的程式碼進行簡化，例如 `DOM操作`、`非同步處理`、

回報區
---

| Discord | CodePen / 答案 |你嘗試用 ts 的地方 |
|:-------------:|:----------------------------------------------------------------:|:----------------------------------------------------------------:|
|洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)| 有用 validate 驗證
|洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)| 第一次整到 Vue+Vite 上！
|洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)| try、catch 部分用了泛型來處理重用性
|洧杰|[Codepen](https://codepen.io/hexschool/pen/poYgYqW?editors=1010)| 依照後端 API 的 schema 做了 interface 客製 request、response
|苡安|[stackblitz](https://stackblitz.com/edit/vitejs-vite-qjrf7o?file=src%2FApp.vue)| TypeScript + Vite 版本，有使用到 interface
|HsienLu|[vercel](https://next-to-do-list-rho.vercel.app/)| TypeScript + React,有使用到 interface