iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

React 開發者的 TypeScript 探索之旅 系列

主要從事 React 開發工作,對於 TypeScript 只有基礎的概念認識。
這次將在 30 天內從零開始深入探索 TypeScript,並記錄我的學習過程,希望這些成長經驗能對有需要的人有所幫助。

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

【 Day 21 】在 TypeScript 中使用 setState 進行狀態管理

本系列文章 GitHub 目前的 Todo List 在輸入欄位為空白時仍然可以送出。今天,我們要來修正這個問題,並為其新增錯誤提示訊息。此外,為了練習我們在...

2024-10-01 ‧ 由 Jamie 分享
DAY 22

【 Day 22 】使用 useContext、useReducer 優化資料管理(一)

本系列文章 GitHub 先前我們為了專注於 TypeScript 的使用方式,因此元件間的資料傳遞都是透過 props 進行。但隨著元件和功能越來越多,是不是...

2024-10-02 ‧ 由 Jamie 分享
DAY 23

【 Day 23 】使用 useContext、useReducer 優化資料管理(二)

本系列文章 GitHub 今天我們要持續優化資料管理的部分,目標是使用 useContext 搭配 useReducer,將新增與刪除功能改為使用全域狀態管理。...

2024-10-03 ‧ 由 Jamie 分享
DAY 24

【 Day 24 】加入編輯功能

本系列文章 GitHub 今天我們要來完成 Todo List 的最後一個主要功能,也就是編輯功能。 這邊先來釐清需求:預計的做法是點擊 Edit 按鈕之後,原...

2024-10-04 ‧ 由 Jamie 分享
DAY 25

【 Day 25 】重構提示訊息

本系列文章 GitHub 在 Day23,我們提到了像 messageDetails 這樣只涉及少數元件的狀態,使用局部管理可以避免不必要的全域依賴並保持程式碼...

2024-10-05 ‧ 由 Jamie 分享
DAY 26

【 Day 26 】如何用 TypeScript 建立通用的 Input 元件

昨天,我們終於將 Todo List 的功能完成,今天開始,我們要來探索一些先前沒有機會用到的小技巧以及觀念。 在 Todo List 中,所有的 <in...

2024-10-06 ‧ 由 Jamie 分享
DAY 27

【 Day 27 】Record, Pick, Omit

透過使用 TypeScript 的 Utility Types,可以更靈活地操控型別,特別是在處理複雜的資料結構時。 接下來的這幾天,我們要來介紹 TypeSc...

2024-10-07 ‧ 由 Jamie 分享
DAY 28

【 Day 28 】Partial, Required, Readonly

今天我們要繼續介紹 TypeScript 的 Utility Types。這次要探索的是 Partial、Required 以及 Readonly,這些工具類型...

2024-10-08 ‧ 由 Jamie 分享
DAY 29

【 Day 29 】Exclude, Extract, NonNullable

今天我們要來介紹三個非常實用的 TypeScript Utility Types,它們分別是 Exclude、Extract 以及 NonNullable。這些...

2024-10-09 ‧ 由 Jamie 分享
DAY 30

【 Day 30 】結語

終於來到了第30天的挑戰!這是我第一次參加鐵人賽,從決定參賽到正式開賽,心中經歷了許多掙扎,包括內容的配置和個人時間的安排。但如今順利完賽,我非常慶幸當初做出了...

2024-10-10 ‧ 由 Jamie 分享