React 的 Hooks 是讓我們能夠在函式組件中使用狀態和生命週期的工具。而使用 TypeScript，則可以為這些 Hooks 增加型別註記，提升程式的可讀性和安全性，幫助我們避免型別錯誤。今天的文章將介紹如何使用 TypeScript 為 useState 和 useEffect 等常見 Hooks 增加型別註記，並提供一些簡單易懂的範例。

一、為 useState 添加類型支持

useState 是 React 中用來管理組件狀態的 Hook。默認情況下，TypeScript 會自動推斷 useState 的狀態型別，但如果需要，我們也可以手動指定型別。

1. 基本範例

在下面的範例中，使用 useState<number> 來告訴 TypeScript count 的型別是 number，這樣 TypeScript 可以確保 setCount 只能接收數字的型別，避免傳入其他型別的值。

import React, { useState } from 'react';

function Counter() {
  // 使用 useState 管理數字型別的 state
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>當前計數: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default Counter;

如果省略 number，TypeScript 其實也會自動推斷型別，但手動指定型別能更清楚地表達我們的意圖。

2. 使用複雜型別

當狀態變得更加複雜時（例如一個物件），也可以為 useState 明確指定物件型別。

interface User {
  name: string;
  age: number;
}

function UserInfo() {
  const [user, setUser] = useState<User>({ name: 'Annie', age: 18 });

  const updateUserName = (newName: string) => {
    setUser((prevUser) => ({ ...prevUser, name: newName }));
  };

  return (
    <div>
      <p>名字: {user.name}</p>
      <p>年齡: {user.age}</p>
      <button onClick={() => updateUserName('Billy')}>更新名字</button>
    </div>
  );
}

export default UserInfo;

在這個範例中，我為 useState 定義了一個 User 介面，讓 user 的狀態擁有 name 和 age 兩個屬性。這樣可以確保未來對狀態的更新是符合預期的。

二、為 useEffect 添加類型支持

useEffect 是 React 中用來處理副作用的 Hook，通常會用來執行像是 API 請求、訂閱或 DOM 操作等工作。雖然 useEffect 本身不太需要指定回傳值的型別，但在依賴清單中我們可以使用 TypeScript 幫助我們檢查依賴的狀態。

1. 基本範例

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval); // 清除副作用
  }, []); // 空依賴陣列，表示這個 effect 只會在組件掛載時執行

  return (
    <div>
      <p>計時: {count} 秒</p>
    </div>
  );
}

export default Timer;

在這個範例裡，我使用 useEffect 來設定一個計時器，並在元件卸載時清除這個計時器。雖然 useEffect 本身不需要特別的型別註記，但藉由使用 useState<number> 可以確保 count 的型別是數字。

這樣的型別系統能幫助我們避免將錯誤的資料型別傳遞給 setCount，讓程式在運行時更加安全。

2. 依賴清單型別

當 useEffect 依賴於某些值時，這些值的型別也會影響到 useEffect 的行為。可以讓 TypeScript 幫助我們確保依賴清單中的每個值都有正確的型別。

import React, { useState, useEffect } from 'react';

function Greeting({ name }: { name: string }) {
  const [greeting, setGreeting] = useState<string>('');

  useEffect(() => {
    setGreeting(`Hello, ${name}!`);
  }, [name]); // TypeScript 會檢查 name 的型別是否正確

  return <p>{greeting}</p>;
}

export default Greeting;

在這個範例中，useEffect 的依賴是 name，而 TypeScript 會自動檢查 name 的型別是否正確，確保我們不會將其他類型的值傳遞給它。

三、結語

使用 TypeScript 為 React 的 Hooks 添加類型支持，可以讓我們在管理組件狀態和處理副作用時，避免常見的型別錯誤、提升程式的穩定性，並使程式更加可讀且易於維護。今天的文章說明如何為 useState 和 useEffect 添加型別註記，並透過一些簡單的範例作為應用展示。