iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

用 TypeScript 重新定義前端開發:30 天的實踐與思考 系列

在過去的前端開發中,TypeScript 正逐漸成為許多開發者的首選工具。作為一名工程師,我在學習和使用 TypeScript 的過程中,感受到它帶來的開發體驗提升,也逐漸累積了一些經驗和心得。
出於個人學習的動機,我決定透過連續 30 天的文章分享,整理並紀錄我在使用 TypeScript 以及搭配 React 時的所學所思,期許在分享中更鞏固我對 TypeScript 的理解。

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11:TypeScript 的型別別名 (Type Aliases)

型別別名 (Type Aliases) 在 TypeScript 中,型別別名提供了一個靈活的方式來簡化複雜型別,提升程式碼的可讀性,並且可以重複使用這些型別。...

2024-09-24 ‧ 由 Annie 分享
DAY 12

Day12:TypeScript 的泛型(Generics)基礎

泛型 (Generics) TypeScript 裡的泛型(Generics)允許我們在定義函式、類別或介面時不必指定具體的資料型別,而是使用佔位符<&g...

2024-09-25 ‧ 由 Annie 分享
DAY 13

Day13:TypeScript 的類別(Classes)基礎

TypeScript 的類別基礎 在 TypeScript 中,類別(Classes)提供了一個面向對象編程的方式,讓我們能夠更有效地組織和重用程式碼。類別不僅...

2024-09-26 ‧ 由 Annie 分享
DAY 14

Day14:TypeScript 的繼承與多型 (Inheritance and Polymorphism)

在 TypeScript 中,繼承和多型是兩個重要的面向對象編程 (OOP) 概念,這些特性使程式碼具有更高的重用性和靈活性。透過繼承,我們可以建立新的類別來擴...

2024-09-27 ‧ 由 Annie 分享
DAY 15

Day15:TypeScript 的模組系統 (Modules)

在開發大型應用時,把程式碼分割成多個檔案是很重要的。這不僅讓程式碼更容易維護,也能夠提高團隊開發品質。這時候模組 (modules) 就相當好用了。TypeSc...

2024-09-28 ‧ 由 Annie 分享
DAY 16

Day16:將 TypeScript 加入到現有的 JavaScript 專案-以 To do list 為例

在前面的篇幅介紹了一些 TypeScript 的基礎應用,所以這篇文章中,將介紹如何將 TypeScript 加入到現有的 JavaScript 專案,並以一個...

2024-09-29 ‧ 由 Annie 分享
DAY 17

Day17:在 React 中使用 TypeScript 的基本設置與應用

在前一篇文章中,學到了如何在一般的 JavaScript 專案中加入 TypeScript,今天就來分享在前端框架 React.js 如何使用吧!TypeScr...

2024-09-30 ‧ 由 Annie 分享
DAY 18

Day18:使用 TypeScript 為 React 元件定義 Props 型別

在 React 專案搭配 TypeScript 後續開發前,最重要的工作之一就是為元件定義 props 的型別。這不只可以讓程式碼更清晰易懂,也能幫助未來在開發...

2024-10-01 ‧ 由 Annie 分享
DAY 19

Day19:使用 TypeScript 處理 React 元件的 State 和 Context 型別

在 React 開發中,State 和 Context 是兩個非常常見的功能,負責管理組件的狀態與跨組件的資料共享。而引入 TypeScript 後,我們可以為...

2024-10-02 ‧ 由 Annie 分享
DAY 20

Day20:使用 TypeScript 為 React Hooks 增加型別註記

React 的 Hooks 是讓我們能夠在函式組件中使用狀態和生命週期的工具。而使用 TypeScript,則可以為這些 Hooks 增加型別註記,提升程式的可...

2024-10-03 ‧ 由 Annie 分享