---
GA: G-7BSJTG7RYN
---
March 09, 2023 | Created
# 邁向 TypeScript 之路，踩著 JS30 往上爬｜前言與目錄

本篇文章為筆者初次接觸 TypeScript，因此會直接使用筆者先前練習 JavaScript30 的程式碼([Github](https://github.com/elzuoc/JavaScript30-2022))，以熟悉 TypeScript 的使用為主要目標，因此邏輯寫法不一定是最精簡的。

若想要精進邏輯寫法，建議可直接參照 [JavaScript30](https://javascript30.com) 官網提供的檔案。

#### 文章目錄
本次文章預計撰寫 32 篇來記錄學習過程

> Day 00：環境設置
> Day 01：JavaScript Drum Kit
> Day 02：JS and CSS Clock
> Day 03：CSS Variables
> Day 04：Array Cardio Day 1
> Day 05：Flex Panel Gallery
> Day 06：Type Ahead
> Day 07：Array Cardio Day 2
> Day 08：Fun with HTML5 Canvas
> Day 09：Dev Tools Domination
> Day 10：Hold Shift and Check Checkboxes
> Day 11：Custom Video Player
> Day 12：Key Sequence Detection
> Day 13：Slide in on Scroll
> Day 14：JavaScript References VS Copying
> Day 15：LocalStorage
> Day 16：Mouse Move Shadow
> Day 17：Sort Without Articles
> Day 18：Adding Up Times with Reduce
> Day 19：Webcam Fun
> Day 20：Speech Detection
> Day 21：Geolocation
> Day 22：Follow Along Link Highlighter
> Day 23：Speech Synthesis
> Day 24：Sticky Nav
> Day 25：Event Capture, Propagation, Bubbling and Once
> Day 26：Stripe Follow Along Nav
> Day 27：Click and Drag
> Day 28：Video Speed Controller
> Day 29：Countdown Timer
> Day 30：Whack A Mole
> Day 31：學習心得

---
### Reference
- [讓TypeScript成為你全端開發的ACE！- Maxwell Huang](https://www.books.com.tw/products/0010859134)
- [讓 TypeScript 成為你全端開發的 ACE！ 系列 - 第 11 屆 iThome 鐵人賽](https://ithelp.ithome.com.tw/users/20120614/ironman/2685)
- [TypeScript Official Site](https://www.typescriptlang.org/docs)
---

> 系列：[`邁向 TypeScript 之路，踩著 JS30 往上爬`](https://hackmd.io/@elzuoc?tags=%5B%22%E9%82%81%E5%90%91+TypeScript+%E4%B9%8B%E8%B7%AF%EF%BC%8C%E8%B8%A9%E8%91%97+JS30+%E5%BE%80%E4%B8%8A%E7%88%AC%22%5D)
> 下一篇：[Day00：環境設置]()

###### tags: [`邁向 TypeScript 之路，踩著 JS30 往上爬`](https://hackmd.io/@elzuoc?tags=%5B%22%E9%82%81%E5%90%91+TypeScript+%E4%B9%8B%E8%B7%AF%EF%BC%8C%E8%B8%A9%E8%91%97+JS30+%E5%BE%80%E4%B8%8A%E7%88%AC%22%5D)