使用Typescript在createContext中传递setState函数

Question

我试图使用创建上下文传递setState，但在声明其默认值时遇到问题。我如何才能做到这一点，这样TS就不会给我一个属性类型不兼容的错误？如何声明其默认值，使其实际适合类型Dispatch<SetStateAction<string>>？

import { createContext, useState, useEffect } from "react";
import useLocalStorage from "../../hooks/useLocalStorage/";
interface DarkModeContextProviderProps {
children?: React.ReactNode;
}
export const DarkModeContext = createContext({
isDarkMode: false,
darkModeState: "off",
toggleIsDarkMode: () => {},
setDarkModeState: () => {}, // ????
});
export const DarkModeContextProvider = ({
children,
}: DarkModeContextProviderProps) => {
const [isDarkMode, setIsDarkMode] = useState(false);
const [darkModeState, setDarkModeState] = useState("");
const [localStorageDarkMode, setLocalStorageDarkMode] = useLocalStorage(
"darkModeState",
darkModeState
);
const toggleIsDarkMode = () => {
setIsDarkMode((prev) => !prev);
};
const value = {
isDarkMode,
toggleIsDarkMode,
darkModeState,
setDarkModeState,
};
useEffect(() => {
setDarkModeState(localStorageDarkMode);
}, []);
useEffect(() => {
setLocalStorageDarkMode(darkModeState);
}, [darkModeState]);
return (
<DarkModeContext.Provider value={value}>
{children}
</DarkModeContext.Provider>
);
};

Answer 1

您不能有默认的状态设置器，因为您必须在外部创建上下文，而状态设置器只存在于组件内部。您可以做的是定义一个DarkModeContextInterface并像这样使用它：

interface DarkModeContextInterface {
isDarkMode: boolean;
darkModeState: string;
toggleIsDarkMode: Dispatch<SetStateAction<string>>;
setDarkModeState: Dispatch<SetStateAction<string>>;
}
export const DarkModeContext = createContext<DarkModeContextInterface | null>(null)

以下是如何使用它：

// the "!" is to tell Typescript that it won't be null, the default value
cont {isDarkMode} = useContext(DarkModeContext)!; 

Answer 2

您可以为上下文创建类型/接口

import type { Dispatch, SetStateAction } from "react";
interface IDarkModeContext {
isDarkMode: boolean;
darkModeState: string;
toggleIsDarkMode: Dispatch<SetStateAction<string>>;
setDarkModeState: Dispatch<SetStateAction<string>>;
}
export const DarkModeContext = createContext<IDarkModeContext>({
isDarkMode: false,
darkModeState: "off",
toggleIsDarkMode: () => {},
setDarkModeState: () => {},
});