TypeScript

終於完成連續三十天的鐵人賽文章撰寫！距離我第一次參加鐵人賽已經三年之久了。這次參加主要是因為朋友邀請一起參賽，同時我自己也想藉此機會深入了解 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 鐵人賽文章，時至今日，站在巨人肩膀上的我也想透過文章的方式輸出，讓我能更有效率地鞏固知識，如果有寫得不好或需要調整的地方也不吝賜教。