iT Ironman

終於完成連續三十天的鐵人賽文章撰寫！距離我第一次參加鐵人賽已經三年之久了。這次參加主要是因為朋友邀請一起參賽，同時我自己也想藉此機會深入了解 TypeScript 5 的新功能，強迫自己透過寫作來吸收知識。

在開發專案時，經常會遇到跨專案共用邏輯或工具的情況，例如常用的 logger 或驗證工具。如果每次都從一個專案複製貼上到另一個專案，難免會出現版本不同步或維護困難的問題。為了解決這類問題，我們可以將這些共用邏輯獨立成為 npm 套件，以便在多個專案中重複使用。

在現代前端開發中，與後端進行資料交換是常見的需求。透過 HTTP 請求，我們可以將資料送出並取得結果。這篇文章將介紹如何使用 TypeScript 實作前端表單與串接 API，並展示如何將這些功能結合到 React 應用中。同時，文章還會介紹如何解決跨域問題（CORS），以便讓前後端能順利溝通。

今天我們將實作一個任務清單元件，並一步步重構它，使原本無法複用的元件，利用泛型變成更通用、更彈性的元件。這章節會著重在如何運用 TypeScript，不會過多討論 React 的原理。如果對 React 還不太熟悉，可以先參考官方[快速上手文件](https://react.dev/learn)。

介紹前端如何搭配 TypeScript 來開發，這個章節我們會使用 React 來實作簡單的任務管理網站，並串接我們寫好的後端，而會選擇使用 React 的原因也是非常簡單。1. React 函式庫撰寫方式與原生 JavaScript 接近。2. 目前職缺數量是三大框架最多的。3. 最重要的是，是我最熟的框架。本篇會先介紹如何初始化一個 React + TypeScript 專案。

在這篇文章中，我們將介紹如何使用 TypeScript 的裝飾器來生成 Express 路由，從而讓程式碼更加簡潔。過去，由於 TypeScript 的裝飾器功能尚未完善，我們通常需要使用 reflect-metadata 這樣的套件來擴展裝飾器對 metadata 的支援。然而，隨著 TypeScript 5.2 的推出，裝飾器已經原生支援 metadata，因此不需要再依賴外部套件。

在開發後端應用程式時，資料驗證和中間件的設計是非常重要的。這不僅能確保資料的正確性，也能提升 API 的穩定性。在這篇文章中，我們將使用與 TypeScript 很搭的 Zod 進行資料驗證，並撰寫一個簡單的 Express 中間件來處理錯誤。

在這篇文章中，我們將學習如何在 TypeScript 後端應用中實現資料持久化。因為本系列的主要目的是學習 TypeScript，我們會採用最簡單的方式來處理資料持久化。我們將使用原生 Node.js API 來讀寫 JSON 檔案，達到資料持久化的效果，這對於我們學習專案來說是一個簡單又實用的方式。

在前一篇文章中，我們介紹了如何使用 TypeScript 與 Express 搭建一個基礎的後端應用，並實現了最簡單的 `Hello World` 功能。本篇將進一步介紹如何設計 Express 路由，並透過 MVC 架構來實現簡單的 CRUD 功能。路由是 RESTful API 的核心之一，它負責將 HTTP 請求轉發到對應的控制器。接下來，我們將建立一個簡單的任務管理 (Task) 系統，模擬基本的任務資料操作。

TypeScript 我們已經學的差不多了～接下來要進入實戰環節！這個章節我們會使用 Express 框架來實作簡單的 CRUD Web 後端應用程式，會選擇使用 Express 的原因也非常簡單。1. Express 足夠簡單、輕便、易於學習。2. 到現在都還在持續更新，是個成熟的後端框架。3. 最重要的是，也是我唯一會的後端框架。本篇會先介紹如何使用 TypeScript 與 Express 建置基礎的後端專案，並讓它運作起來。

在上一篇文章中，我們介紹了新版裝飾器與舊版裝飾器的差異。這一篇將更深入探討新版裝飾器的實際應用。要運行本文範例，請確保 TypeScript 版本為 5 以上，並且 `experimentalDecorators` 與 `emitDecoratorMetadata` 均未啟用或設為 `false`。TypeScript 5 除了不再支援舊版的參數裝飾器（Parameter Decorator）外，還多增加了更多細節的裝飾器。

TypeScript 5 裝飾器有重大的更新，這是因為裝飾器在 JavaScript 中首次提出於 ES2016 的草案中，並逐步經過 TC39 的標準化過程，最終在 TC39 Stage 3 中穩定下來，並在 TypeScript 5 中得到了實現。這使得裝飾器不再僅僅是一個實驗性特性，在未來也會是基於 JavaScript 標準的語法。裝飾器的演進不僅讓 TypeScript 開發者能夠更加一致地撰寫裝飾器，還提高了裝飾器的靈活性與可讀性。這一篇將探討新版裝飾器與舊版的差異，並介紹新版裝飾器的使用方法和特性。

在上一篇文章中，我們初步介紹了裝飾器的基本概念與應用方式。本篇將深入探討 TypeScript 5 之前的舊版裝飾器，並介紹其各種類型。在舊版裝飾器中，有些情況下需要在 tsconfig.json 中額外設定 emitDecoratorMetadata、experimentalDecorators 來啟用裝飾器元資料。請先將此設定加入，以便順利使用裝飾器功能。

本篇將初步介紹 TypeScript 裝飾器（Decorators）的基本概念與應用。裝飾器是一種特殊的宣告，可以用來修改類別、方法、屬性或參數的行為，是實現 AOP（剖面導向程式設計）的重要工具。

在上一篇文章中，我們介紹了如何設定 TypeScript 的編譯範圍與目標版本。而這一篇文章將進一步介紹 tsconfig.json 的其他細節配置，包括類型檢查、編譯輸出設定，以及常見的 CLI 指令參數，這些設定不僅會影響編譯結果，還會對你的開發體驗產生直接的影響。

在 TypeScript 中，編譯的靈活性與可控性是其強大的特點之一。通過 tsconfig.json 文件，我們可以對 TypeScript 編譯器進行全面的配置，可以控制哪些檔案應該被編譯或排除，以及目標 JavaScript 版本和編譯兼容用的函式庫選擇，都是我們經常面對的問題。

模組化是現代程式開發中不可或缺的一部分。模組允許我們將程式碼拆分為更小的可重用單位，從而提高了程式碼的可維護性和可讀性。在 TypeScript 中，我們使用 import 和 export 關鍵字來實現模組的匯入與匯出，並透過 npm 來管理第三方套件和依賴。

雖然 TypeScript 並沒有針對非同步與 Promise 做特別的處理，但所有程式語言，都會遇到非同步處理的挑戰，這一篇會稍微說明為何在現代應用中，需要使用 Promise、async/await 等非同步的技術，並說明 TypeScript 在這些情境中提供哪些型別來幫助我們更好的處理非同步的型別處理。

在 JavaScript 裡，沒有內建的函式重載（Function Overloading）功能，但在 TypeScript 中，我們可以透過型別註解來模擬此功能。此外，this 是 JavaScript 中常見且具挑戰性的概念，透過 TypeScript 的類別與介面，可以更精確地控制 this 的行為。

上一篇介紹了條件型別後，這次介紹的型別推斷會需要跟條件型別組合一起使用，型別推斷是利用條件型別來幫我們推斷出型別。本篇將深入介紹型別推斷（infer），並搭配字面型別（Literal Types）與映射型別（Mapped Types）來介紹。

在前面介紹完基礎泛型後，接下來要介紹的是 TypeScript 中一個強大且靈活的功能——條件型別（Conditional Types）。本篇將深入探討條件型別的應用，包括如何用它來實現型別的深度唯讀，並進一步說明 TypeScript 中的常數（const）怎麼定義與區別。

本文將深入探討泛型在進階應用中的強大能力，包括預設泛型型別、泛型約束、工具型別等，展示如何利用泛型來處理更複雜的型別操作。

本篇將介紹 TypeScript 中泛型（Generics）的入門與核心概念，了解如何透過泛型來增加程式碼的靈活性與可重用性，並學習泛型在函式與介面中的基本應用。

前面的文章已經有稍微介紹了介面（interface）的用法，介面能夠幫助我們定義物件應該有哪些屬性和方法，從而提供一種強型別的約束機制，讓開發者更容易組織代碼並進行程式設計。

抽象類別（Abstract Class）是物件導向設計中的一種類別，它是用來作為其他類別的基礎，無法直接實例化。抽象類別通常會有抽象方法（未實作的方法），子類必須覆寫這些抽象方法，並根據具體需求提供實作。

類別是一個基礎的物件導向設計（Object-Oriented Programming, OOP），是一種以物件為中心的編程範式，強調模擬現實世界的實體與行為。類別將資料（屬性）和行為（方法）整合在一起，方便定義和操作不同的物件實例。

在前幾篇中，我們介紹了 TypeScript 的基本型別與物件型別。在本篇中，將深入探討進階的型別系統，包括聯合型別、交集型別、型別斷言、索引型別、非空斷言操作符等。

物件型別在 TypeScript 中非常重要，因為它們允許我們定義複雜的資料結構，包括陣列、函式、列舉...等。這些型別幫助我們在開發中建立更嚴謹且易於維護的程式碼。

我們都知道 TypeScript 是 JavaScript 的超集，所以在介紹 TypeScript 的型別之前，我們先介紹一下 JavaScript 原本就有的型別。

很高興你來到這裡，本次鐵人賽系列文章將會分享如何學習 TypeScript 以及實戰運用。目前從事前端已經有兩年，接觸 TypeScript 也只有一年多的經驗，以往有看過大神分享的 TypeScript 鐵人賽文章，時至今日，站在巨人肩膀上的我也想透過文章的方式輸出，讓我能更有效率地鞏固知識，如果有寫得不好或需要調整的地方也不吝賜教。

ES8 新增了 async 與 await 兩個語法，這兩個語法也是為了更方便解決非同步的語法，可以說是 Promise then 的語法糖。

ES6 新增了更接近傳統語言寫法的 Class 這個概念，基本上可以當作是一個**語法糖**，絕大部分的功能在 ES5 都可以做到，但 Class 可以讓構造函式的寫法更加清新！

我們前面已經學習了回調函式（Callback Function）與構造函式（Constrcutor），而 Promise 是 ES6 新增用來解決非同步回調地域的新語法，同時也是一個構造函式！

之前已經介紹了 var 與函式作用域，今天來更仔細的介紹 ES6 新增的 let 、 const以及與它們相關的區塊作用域。

我們前面已經認識了函式作用域，也瞭解了回調函式，但有時候會產生意想不到的事情，造成內存問題，其中一個是閉包。

我們前面已經瞭解了事件綁定與事件冒泡了，但是使用物件元素直接綁定事件有不方便的地方，1. 只能同時為一個元素的一個事件綁定一個響應函式，2. 不能綁定多個，如果綁定多個，後面會覆蓋前面的。

我們上一個篇章認識了綁定事件，了解到不管是什麼節點，都可以綁定事件，那為什麼 JavaScript 會知道我們觸發事件？當我們點擊網頁中任何一個元素，是不是也等於點擊到網頁本身！而點擊元素與網頁本身這個過程是有順序的，稱為「事件流程」。

我們之前在 HTML 篇章有介紹 DOM，是 Document Object Model 的縮寫！我們主要操作 DOM 來控制網頁內容～

之前我們有說過，再調用函式的時候，瀏覽器會傳遞隱藏的參數給我們函式，一個是「this」，除了 this 還有另一個參數是「arguments」！

我們每新增一個函式，瀏覽器都會向函式內新增一個屬性叫「prototype」，如果是普通函式的直接調用，「prototype」不會有任何作用，當是以構造函式的方式調用，他所新增的物件會有一個隱藏的屬性，指向該構造函式的原型物件，雖然「prototype」是隱藏屬性，但我們可以透過「__proto__」來查看該屬性！

如同學習函式一樣！有時候我們會一直重複地做一件事，當還是初學者的我們需要製作大量的個人資料物件時，通常第一個想法就是複製貼上～一直重複製作一樣的東西！我們要發揮工程師的精神～看到一直有重複的程式碼時，就要想辦法簡化它。在學習自訂物件之前，要先認識之前函式沒說到的「this」

我們的變數在我們開啟網站時，都會存放在記憶體內，當我們關閉網站時，記憶體也會將這些變數釋放。

函數也是個物件型別，可以封裝一些功能（程式碼），在需要使用的時候執行功能（程式碼）。

前面有介紹了基本型別，基本型別有 string、number、boolean、null、undefined 這五個型別，剩下的可以都歸類於物件型別。

前面學習到了條件判斷式，接著我們來學習有點危險的循環迴圈，好啦！也沒那麼誇張～只是寫不好，容易進入無窮迴圈導致當機！不過我們是寫在網頁上～所以如果真的不小心陷入無窮迴圈，就關掉瀏覽器就可以了！

前面學習了基礎的變數與運算子的使用，這些基礎往往是非常枯燥乏味的，還沒有與電腦有更進一步的互動，所以感受不到程式語言的魅力，而今天學習的條件判斷式就可以開始與電腦進行些微的互動！

學習任何東西，都要把基礎學的扎實，基礎穩了，遇到問題就能迎刃而解。而學習程式語言的基礎就是數學邏輯，不用到很專精，只要有基礎數學邏輯，多寫多做就能鍛鍊出寫程式邏輯的金魚腦，基礎邏輯打穩了，任何程式語言都有相似的地方，會越學越快，然後發現根本是無底洞，沒有盡頭。

JavaScript 是個弱型別語言，在宣告變數時，不像其他語言需要先指定型別那麼嚴謹，宣告的變數名會對應記憶體位子，把其值存入記憶體中，之後要取出值，只要藉由變數名，就能找到對應的值。

現在我們會使用具有互動性的簡單漸變效果了，接著要來試著讓網頁能增添更多活力，不需要我們操作，就會自動播放動畫效果。

現在我們會使用基本的偽類選擇器做效果了，但看到變化過程一閃而過、冷冰冰的，想增添更多漸變效果，讓動態效果可以更多變化、更平滑動感，就要使用我們的 transform 與 transition 這兩個屬性。

雖然標題有點聳動，但在這個行動裝置越來越多的現在，如果沒有手機版的網頁，SEO 排名會大受影響，也等同於宣告死刑了。

偽（Pseudo）這個意思有虛幻虛無的意思，類選擇器是用來處理 DOM 操作不了選擇器，偽元素則是原本並沒有在 HTML DOM 中，是透過 CSS 創造出來的元素。

我們已經了解到基本的切版概念了，但前面所學的都是固定在網頁上，也就是之前所說正常的文檔流！而這一篇就要來學會更進階一點了佈局方法了，讓元素布局上更加奔放自由，脫離文檔流。

要來介紹大家最愛用的 Flexbox 了，以往兼容性還不太好的時候，大多都是使用表格（table）屬性來進行排版，也容易出問題，現在科技進步迅速，瀏覽器也持續跟進，~~IE 也要進入歷史了~~，只要用簡單的語法，就能安排元素在網頁上各自的位置，非常的方便好用又彈性！還不快學起來！

如同前面章節所說，一開始的標籤元素，很單調只有一行並沒有各式各樣的元素，是瀏覽器內建的樣式表賦予它該展示的樣子。所以我們可以把任何標籤變成任何你愛的樣子，當然不希望如此瞎搞！

使用標籤元素套用就像是畫草圖上底色，雖然有色彩但不細緻，這時為了能夠更精雕細琢我們的網頁，於是我們要更加精準的設定樣式，但有的選擇器必須謹慎使用，不然後面要修改就麻煩了。

人是視覺動物，當網頁架構用得差不多了，想自己安排布局，會開始想辦法把網頁變得更漂亮。

雖然會最基礎的 div 和 span 標籤就能夠開始切版了，甚至只靠 div 搭配 CSS 就能做出各種 tag 的效果，但為了良好的 SEO 與 閱讀性，也為了以後不會把別人和自己逼瘋 (?，還是會建議用更適合的標籤來完成網頁。

上一篇有講到網頁三兄弟，其中有一個老大哥負責撐起這個世界，那就是 HTML ，少了 HTML 這個根基，就不會有網頁。只有 HTML 的世界是非常無聊的，這時 CSS 和 Javascript 接連出現，為網頁世界創造更多的可能！

大家好！我是毛毛，因為這波疫情影響下，讓我多了許多時間可以好好投資自己，想把自己目前所學的技能，轉化成能夠讓更多人更好吸收的知識，如果有發現內容有誤，也請您不吝指教，感謝。