iT邦幫忙

鐵人檔案

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

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

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

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

【 Day 01 】前言

本身是一位 React 開發者,兩年前第一次自學接觸到 TypeScript,後來因前份工作主要專注於 VR 技能相關開發,且公司開發規範中不使用 TypeSc...

2024-09-11 ‧ 由 Jamie 分享
DAY 2

【 Day 02 】前置作業

在正式踏上 TypeScript 探索之旅前,我們有一些前置作業需要先完成。 安裝 Node.js請前往 Node.js 官方網站 下載,建議下載 LTS...

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

【 Day 03 】基本型別

本系列文章使用 VS Code 作為 IDE。 首先,開一個空的資料夾,在裡面新增一個副檔名 .ts 的檔案,例如 app.ts。TypeScript 會根據...

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

【 Day 04 】TypeScript 編譯器

今天要來介紹編譯器的使用方式,我們在 Day02 的時候有提到,tsc 是用來將 TypeScript 編譯成 JavaScript 的指令。 為什麼會需要這樣...

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

【 Day 05 】Union & Object & Array

Union 聯集 上一篇我們提到「 TypeScript 會對於基本型別自動進行推測 」,但在有些情況下,變數有可能不只一種型別,例如使用者密碼,若我們沒有限定...

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

【 Day 06 】Function

當參數為值 TypeScript 可以為函式的參數指定型別: function add(a: number, b: number) { const sum...

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

【 Day 07 】Custom Types & Interface

Custom Types 根據上一篇的程式碼,雖然我們達成了指定函式型別的目的,但你會發現它在閱讀性上並不是很好: function calculate(a:...

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

【 Day 08 】合併型別與 Literal Types

type 合併用法 首先,我們以餐廳與顧客為例,定義一個簡單的例子: type Restaurant = { menu: string[] addres...

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

【 Day 09 】泛型

在前面的章節中,我們介紹了如何直接指定類型,這種方式在實務中非常常見。但是,當我們有多個相似功能的函式或物件時,重複定義類型並不是最理想的解決方案。 或許你會想...

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

【 Day 10 】建立 React - TypeScript 專案

前幾篇文章中,我們探討了一些 TypeScript 的基本用法。從這一篇開始,我們將探索如何在 React 中使用 TypeScript。 首先,打開終端機,建...

2024-09-20 ‧ 由 Jamie 分享