如何为React Context编写TypeScript接口并定义传递值类型？

1. 定义枚举与Context完整接口 #

先明确枚举类型，再把需要暴露的状态、状态更新函数、异步方法都纳入Context接口：

// 你的枚举类型示例，根据实际业务调整
enum MyEnum {
  StatusA = 'STATUS_A',
  StatusB = 'STATUS_B',
  StatusC = 'STATUS_C'
}

// 定义getResults的返回结果类型，根据后端接口调整
type ApiResult = {
  id: string;
  status: MyEnum;
  content: string;
};

// Context的完整类型接口
interface AppContextType {
  // 状态值
  greenStatus: Set<MyEnum>;
  redStatus: Set<MyEnum>;
  searchTerm: string;
  // 状态更新函数（复用React内置的Dispatch类型）
  setGreenStatus: React.Dispatch<React.SetStateAction<Set<MyEnum>>>;
  setRedStatus: React.Dispatch<React.SetStateAction<Set<MyEnum>>>;
  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
  // 异步请求方法的类型声明
  getResults: () => Promise<ApiResult[]>;
}

2. 创建Context并设置合法初始值 #

React Context必须传入初始值，要严格匹配接口类型，用空集合、空字符串、空函数作为占位：

import { createContext, useState, useContext, ReactNode } from 'react';
import axios from 'axios';

// 创建Context，传入符合类型要求的初始值
const AppContext = createContext<AppContextType>({
  greenStatus: new Set<MyEnum>(),
  redStatus: new Set<MyEnum>(),
  searchTerm: '',
  // 初始更新函数设为空函数，实际会被Provider中的真实值覆盖
  setGreenStatus: () => {},
  setRedStatus: () => {},
  setSearchTerm: () => {},
  // 初始异步方法设为返回空数组的占位函数
  getResults: async () => []
});

3. 实现Provider组件并注入状态 #

在Provider内部管理所有状态，实现异步请求逻辑，再把所有值传递给子组件：

export function AppProvider({ children }: { children: ReactNode }) {
  // 初始化状态
  const [greenStatus, setGreenStatus] = useState<Set<MyEnum>>(new Set());
  const [redStatus, setRedStatus] = useState<Set<MyEnum>>(new Set());
  const [searchTerm, setSearchTerm] = useState<string>('');

  // 实现异步请求方法，可根据需求添加参数或调整请求逻辑
  const getResults = async () => {
    try {
      const res = await axios.get('/api/query-results', {
        params: {
          greenStatus: Array.from(greenStatus),
          redStatus: Array.from(redStatus),
          search: searchTerm
        }
      });
      return res.data as ApiResult[];
    } catch (err) {
      console.error('请求结果失败:', err);
      throw err; // 抛出错误让调用方处理
    }
  };

  return (
    <AppContext.Provider
      value={{
        greenStatus,
        redStatus,
        searchTerm,
        setGreenStatus,
        setRedStatus,
        setSearchTerm,
        getResults
      }}
    >
      {children}
    </AppContext.Provider>
  );
}

// 自定义Hook，简化子组件获取Context的方式
export function useAppContext() {
  return useContext(AppContext);
}

关键细节说明 #

• searchTerm类型：直接用string即可，对应useState初始值''，完全匹配业务需求。
• getResults类型：根据实际请求逻辑调整，比如需要接收参数可改为(params: { keyword: string }) => Promise<ApiResult[]>，确保返回值是Promise包裹的结果类型。
• 初始值必要性：React Context强制要求初始值，占位用的空函数/空集合不会影响实际运行，因为Provider会注入真实的状态和方法。

内容的提问来源于stack exchange，提问作者Kevin