iT邦幫忙

鐵人檔案

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

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

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

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

【 Day 11 】配置檔介紹

之前使用過的版本是舊版的,當時並沒有 tsconfig.app.json 和 tsconfig.node.json 這兩個配置檔案。後來我在 Stack Ove...

2024-09-21 ‧ 由 Jamie 分享
DAY 12

【 Day 12 】TypeScript - Strict Mode

本系列文章 GitHub 相信開發者們對 Todo List 肯定都不陌生,因此這次的範例選擇使用 Todo List 來當作我們練習 TypeScript 的...

2024-09-22 ‧ 由 Jamie 分享
DAY 13

【 Day 13 】為 React props 定義型別

本系列文章 GitHub 基本定義型別 目前我們的 Todo 元件是放在 App.tsx,因此先到 App.tsx 放入我們要傳遞的 props: import...

2024-09-23 ‧ 由 Jamie 分享
DAY 14

【 Day 14 】props in arrow function component

本系列文章 GitHub 在昨天的章節裡,我們使用下方的方式為 props 定義型別: import { type PropsWithChildren } fr...

2024-09-24 ‧ 由 Jamie 分享
DAY 15

【 Day 15 】為 Todo List 加上 Header

本系列文章 GitHub 今天的章節主旨是練習我們昨天學習到的方法,我們要來為這份 Todo List 做一個 Header,預計是加入一個 Logo 以及標題...

2024-09-25 ‧ 由 Jamie 分享
DAY 16

【 Day 16 】使用 useState 儲存 Todo 項目

本系列文章 GitHub 今天我們將為 Todo List 加入新增 Todo 的功能。暫時先將此功能直接放在 App.tsx 中,後續我們會進行優化,將其獨立...

2024-09-26 ‧ 由 Jamie 分享
DAY 17

【 Day 17 】匯出型別

本系列文章 GitHub 今天我們將繼續優化 Todo 列表,昨天我們將其內容放在了 App.tsx 中: import './App.css' import...

2024-09-27 ‧ 由 Jamie 分享
DAY 18

【 Day 18 】透過 props 實作刪除功能

本系列文章 GitHub 今天我們要來實現刪除 Todo 的功能。以下程式碼會先透過 props 傳遞來實作,目的是熟練前幾章節所學到的技能。請不用擔心,之後我...

2024-09-28 ‧ 由 Jamie 分享
DAY 19

【 Day 19 】FormEvent

本系列文章 GitHub 之前我們將新增 todo 的 input 以及按鈕放在 App.tsx,現在我們要將它提出為獨立的元件: <div classN...

2024-09-29 ‧ 由 Jamie 分享
DAY 20

【 Day 20 】useRef with TypeScript

本系列文章 GitHub 今天我們要將原本寫死的 Todo List 資料轉為使用實際輸入的內容。由於在先前的篇章已經使用過 useState,這次我們將透過...

2024-09-30 ‧ 由 Jamie 分享