在TypeScript中使用useContext实现明暗主题切换遇类型错误

问题回顾 #

在JavaScript组件中使用ThemeContext完全正常：

const [darktheme, setDarkTheme] = useContext(ThemeContext);

但迁移到TypeScript后，即使给darktheme声明boolean类型、setDarkTheme用any，仍存在4个类型错误。核心原因是ThemeContext创建时未指定明确类型，TypeScript无法推断其value的结构，加上项目混合JS/TS开发，类型推断进一步受限。

App.js中的Context定义：

export const ThemeContext = React.createContext();

function App() {
  const [darkTheme, setDarkTheme] = useState(false);

  return (
    <ThemeContext.Provider value={[darkTheme, setDarkTheme]}>
      {/* 组件内容 */}
    </ThemeContext.Provider>
  )
}

解决方案 #

方案1：在TypeScript组件中补全Context类型 #

无需修改JS文件，在TS组件中明确Context的类型结构：

import React, { useContext } from 'react';
import { ThemeContext } from '../App';

// 定义ThemeContext的类型：[主题状态, 修改主题的方法]
type ThemeContextType = [
  boolean,
  React.Dispatch<React.SetStateAction<boolean>>
];

// 给useContext指定泛型类型
const [darkTheme, setDarkTheme] = useContext<ThemeContextType>(ThemeContext);

方案2：将App.js改为App.tsx（推荐，类型更严谨） #

直接在Context创建阶段指定类型，让整个项目的类型推断更准确：

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

// 定义Context类型
type ThemeContextType = [
  boolean,
  React.Dispatch<React.SetStateAction<boolean>>
];

// 创建Context时指定类型和默认值（默认值需符合类型结构）
export const ThemeContext = createContext<ThemeContextType>([false, () => {}]);

function App() {
  const [darkTheme, setDarkTheme] = useState(false);

  return (
    <ThemeContext.Provider value={[darkTheme, setDarkTheme]}>
      {/* 组件内容 */}
    </ThemeContext.Provider>
  );
}

export default App;

之后在TS组件中直接使用即可，无需额外类型声明：

const [darkTheme, setDarkTheme] = useContext(ThemeContext);

关键说明 #

• React.Dispatch<React.SetStateAction<boolean>>是useState返回的setter函数的标准类型：它既接受boolean值，也接受(prevState: boolean) => boolean的回调函数，完全匹配setDarkTheme的实际功能，比any更安全。
• 创建Context时必须提供符合类型的默认值，否则TypeScript会因为无法确定Context的初始值而报错。

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