在TypeScript中使用createContext传递setState函数的类型问题

要解决这个TypeScript类型不兼容的问题，核心是先明确Context的类型定义，再给setDarkModeState提供符合Dispatch<SetStateAction<string>>类型的默认值，具体步骤如下：

1. 导入必要类型并定义Context接口 #

从React中导入Dispatch和SetStateAction类型，创建接口约束Context的结构：

import { createContext, useState, useEffect, Dispatch, SetStateAction } from "react";
import useLocalStorage from "../../hooks/useLocalStorage/";

interface DarkModeContextProviderProps {
  children?: React.ReactNode;
}

// 定义Context的类型结构
interface DarkModeContextType {
  isDarkMode: boolean;
  darkModeState: string;
  toggleIsDarkMode: () => void;
  setDarkModeState: Dispatch<SetStateAction<string>>;
}

2. 创建Context时传入符合类型的默认值 #

基于上面的接口创建Context，给setDarkModeState提供空但符合类型要求的默认函数：

export const DarkModeContext = createContext<DarkModeContextType>({
  isDarkMode: false,
  darkModeState: "off",
  toggleIsDarkMode: () => {},
  // 空函数符合Dispatch类型，TS允许忽略函数参数
  setDarkModeState: () => {},
});

3. 统一组件内初始值（可选但推荐） #

组件中darkModeState初始值是""，和Context默认值"off"不一致，建议统一：

const [darkModeState, setDarkModeState] = useState("off");

完整修改后的代码 #

import { createContext, useState, useEffect, Dispatch, SetStateAction } from "react";
import useLocalStorage from "../../hooks/useLocalStorage/";

interface DarkModeContextProviderProps {
  children?: React.ReactNode;
}

interface DarkModeContextType {
  isDarkMode: boolean;
  darkModeState: string;
  toggleIsDarkMode: () => void;
  setDarkModeState: Dispatch<SetStateAction<string>>;
}

export const DarkModeContext = createContext<DarkModeContextType>({
  isDarkMode: false,
  darkModeState: "off",
  toggleIsDarkMode: () => {},
  setDarkModeState: () => {},
});

export const DarkModeContextProvider = ({
  children,
}: DarkModeContextProviderProps) => {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [darkModeState, setDarkModeState] = useState("off");
  const [localStorageDarkMode, setLocalStorageDarkMode] = useLocalStorage(
    "darkModeState",
    darkModeState
  );

  const toggleIsDarkMode = () => {
    setIsDarkMode((prev) => !prev);
  };

  const value = {
    isDarkMode,
    toggleIsDarkMode,
    darkModeState,
    setDarkModeState,
  };
  
  useEffect(() => {
    setDarkModeState(localStorageDarkMode);
  }, [localStorageDarkMode]);
  
  useEffect(() => {
    setLocalStorageDarkMode(darkModeState);
  }, [darkModeState]);

  return (
    <DarkModeContext.Provider value={value}>
      {children}
    </DarkModeContext.Provider>
  );
};

报错原因说明 #

原来的代码中，TS会自动推断createContext的类型，setDarkModeState被推断为() => void，但实际传入Provider的是Dispatch<SetStateAction<string>>类型（useState<string>()返回的setState函数），两个类型不兼容导致报错。通过提前定义Context类型接口，强制默认值和实际值类型一致，就能解决这个问题。

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