在 React 開發中，State 和 Context 是兩個非常常見的功能，負責管理組件的狀態與跨組件的資料共享。而引入 TypeScript 後，我們可以為這些狀態和共享資料定義型別，讓開發過程更安全。今天的文章，也會配合簡單的範例來說明如何應用。

一、使用 TypeScript 處理組件的 State 型別

1. State 的基本概念

在 React 中，state 是一個可以動態改變的值，通常用來控制元件的顯示狀態或儲存資料。使用 TypeScript 時，必須明確定義 state 的型別，這樣就可以防止無效的狀態更新。

2. 基本應用範例

以下是一個簡單的範例，說明如何使用 TypeScript 定義和管理 state：

import React, { useState } from 'react';

interface CounterState {
  count: number;
}

function Counter() {
  // 定義 status 的型別為 CounterState
  const [status, setState] = useState<CounterState>({ count: 0 });

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

export default Counter;

在上述範例中：

• 我用 useState 來定義一個名為 status 的狀態，它的型別是 CounterState。
• CounterState 是一個擁有 count 屬性的物件，並且 count 是數字型別。
• 在 button 的 onClick 事件中可以更新 count 的值，並使用 setState 方法來更新狀態。
• TypeScript 可以幫助確保 status.count 的值總是數字，並避免傳入錯誤的型別。

二、使用 TypeScript 處理 Context 型別

1. Context 的基本概念

Context 用來在元件樹中傳遞資料，避免逐層傳遞 props。使用 TypeScript 時，必須為 Context 的值定義明確的型別，這樣就可以確保 Context 中的資料在各個組件間的一致性和正確性。

2. 基本範例

接下來也看看簡單的範例，展示可以如何在 React 中使用 Context 並搭配 TypeScript：

import React, { createContext, useContext, useState } from 'react';

// 定義 Context 的型別
interface UserContextType {
  name: string;
  age: number;
  updateUser: (newName: string, newAge: number) => void;
}

// 創建 Context，並設置初始值為 undefined
const UserContext = createContext<UserContextType | undefined>(undefined);

// 創建一個提供 Context 的元件
const UserProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState({ name: 'Annie', age: 18 });

  const updateUser = (newName: string, newAge: number) => {
    setUser({ name: newName, age: newAge });
  };

  return (
    <UserContext.Provider value={{ ...user, updateUser }}>
      {children}
    </UserContext.Provider>
  );
};

// 使用 Context 的元件
const UserProfile = () => {
  const userContext = useContext(UserContext);

  if (!userContext) {
    return <p>未提供 UserContext</p>;
  }

  const { name, age, updateUser } = userContext;

  return (
    <div>
      <h2>用戶資料</h2>
      <p>名稱: {name}</p>
      <p>年齡: {age}</p>
      <button onClick={() => updateUser('Billy', 20)}>更新用戶</button>
    </div>
  );
};

// 主應用元件
function App() {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
}

export default App;

在上述範例中：

• UserContextType: 先定義了 Context 的型別，包含用戶的 name、age 以及一個用來更新用戶資料的 updateUser 函數。
• UserContext: 使用 createContext 創建 Context 並指定型別為 UserContextType 或 undefined，因為一開始可能尚未提供 Context 值。
• UserProvider: 創建一個 Context 提供者，負責將用戶資料傳遞給子元件。這裡使用 useState 來管理用戶資料，並通過 value 傳遞給 UserContext.Provider。
• UserProfile: 在這個元件中，我們使用 useContext 來取得 UserContext 中的資料，並檢查 Context 是否被提供（避免 undefined 狀態）。最後，透過 updateUser 函數來更新用戶的姓名和年齡。
• TypeScript 在這裡的作用是確保我們在使用 Context 的時候，能夠嚴格遵守定義好的資料型別，避免傳入錯誤的資料。

三、結語

在 React 中使用 TypeScript 可以為組件的 state 和 context 定義明確的型別，這樣可以大幅提升開發過程中的安全性和可讀性。因為搭配 TypeScript 可以幫助我們避免潛在的型別錯誤，並讓程式更具預測性。