React 與 TypeScript 最佳實踐

TypeScript 是 JavaScript 的超集，提供靜態型別檢查，使開發過程更具可讀性與可維護性。在 React 專案中使用 TypeScript 可以減少潛在的錯誤，增強程式碼的可靠性，特別適用於大型專案。

要在 React 專案中使用 TypeScript，可以透過 Create React App（CRA）或 Next.js 建立專案。

使用 CRA 建立 TypeScript 專案：

npx create-react-app my-app --template typescript

使用 Next.js：

npx create-next-app@latest my-next-app --typescript

這樣即可建立 TypeScript 版本的 React 應用程式，內建支援型別檢查。

在 React 中，每個元件的 Props 可以透過 TypeScript 定義型別，確保傳遞的資料符合預期。

範例：定義一個 Button 元件的 Props

type ButtonProps = {
label: string;
onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
<button onClick={onClick}>{label}</button>
);

這樣可以確保 label 必須是 string，onClick 必須是函式，避免錯誤傳遞。

在 TypeScript 中，useState 需要指定狀態的型別。例如：

import { useState } from "react";

function Counter() {
const [count, setCount] = useState<number>(0);
return <button onClick={() => setCount(count + 1)}>點擊 {count} 次</button>;
}

這樣 count 會被明確指定為 number，避免誤用其他型別。

useEffect 在 TypeScript 中與 JavaScript 相同，但若依賴某些資料類型時，應明確定義。

範例：載入 API 資料

import { useState, useEffect } from "react";

type User = { id: number; name: string };

function UserList() {
const [users, setUsers] = useState<User[]>([]);

useEffect(() => {
fetch("/api/users")
.then(res => res.json())
.then(data => setUsers(data));
}, []);

return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

這樣 TypeScript 會確保 API 返回的資料符合 User 型別，提升安全性。

useContext 讓我們能夠在組件之間共享狀態，並且 TypeScript 可確保其型別正確。

範例：建立主題切換功能

import { createContext, useContext, useState } from "react";

type ThemeContextType = {
theme: "light" | "dark";
toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<"light" | "dark">("light");
const toggleTheme = () => setTheme(prev => (prev === "light" ? "dark" : "light"));

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}

function ThemedButton() {
const context = useContext(ThemeContext);
if (!context) throw new Error("ThemedButton 必須在 ThemeProvider 內使用");

return <button onClick={context.toggleTheme}>切換主題（目前：{context.theme}）</button>;
}

這樣 useContext 會確保 ThemeContext 的值符合 ThemeContextType，避免不必要的錯誤。

React Hook Form 是一個輕量的表單處理函式庫，搭配 TypeScript 可以提高表單驗證的嚴謹性。

範例：使用 React Hook Form 處理表單輸入

import { useForm } from "react-hook-form";

type FormValues = {
username: string;
email: string;
};

function SignupForm() {
const { register, handleSubmit } = useForm<FormValues>();

const onSubmit = (data: FormValues) => {
console.log("提交資料：", data);
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("username")} placeholder="使用者名稱" required />
<input {...register("email")} type="email" placeholder="電子郵件" required />
<button type="submit">提交</button>
</form>
);
}

這樣 TypeScript 會確保 username 和 email 的型別正確，提升表單驗證的可讀性與安全性。

使用 TypeScript 搭配 React 可以提高開發效率，減少潛在錯誤，特別適合大型專案。透過靜態型別檢查，可以確保 Props、狀態與函式的輸入/輸出皆符合預期，提升整體程式碼的可維護性。