建立 2026-09-15 更新 2026-09-15

React + TypeScript

React 元件本質上也是函式，函式與 Interface 與 Type 學過的東西幾乎都能直接套用。這一頁只講 React 專屬、最常碰到的幾個型別寫法。

建立專案

npm create vite@latest my-app -- --template react-ts

Vite 的 react-ts 模板會準備好 tsconfig.json 與所有型別套件，檔案副檔名用 .tsx（含 JSX 語法的 TypeScript）。

Props 型別

interface ButtonProps {
  label: string
  onClick: () => void
  disabled?: boolean
}

function Button({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  )
}

用 interface 或 type 描述 props 的形狀，再當成函式參數的型別，效果跟一般函式參數型別完全一樣；可選 prop 用 ?，配合解構賦值給預設值。

useState 的型別

import { useState } from "react"

const [count, setCount] = useState(0)              // 推論為 number，不用手動標
const [user, setUser] = useState<User | null>(null) // 初始值推不出完整型別時，手動指定

初始值本身就能看出型別時（如 0），讓 TypeScript 自動推論；初始值是 null 但之後會存放物件時，用 useState<型別 | null>(null) 明確標出來，之後用到 user 前記得先做型別縮小（例如 if (user) { ... }）。

事件的型別

function SearchInput() {
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value)
  }

  return <input onChange={handleChange} />
}

React 為每種 DOM 事件都準備了對應的型別（React.ChangeEvent<HTMLInputElement>、React.MouseEvent<HTMLButtonElement> 等），標好之後 e.target 才會有正確的自動完成，而不是被當成籠統的 any。

React + TypeScript

建立專案

Props 型別

useState 的型別

事件的型別

相關影音