如何在打字稿中使用“useContext”？

Question

我正在尝试在我的项目中制作一个深色/浅色主题系统，但我的代码遇到一些问题。

这行代码在 javascript 中运行良好：

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

但是当我将其写入打字稿时，出现 6 个错误。

我知道其中一些变量需要声明其类型，但我只知道 darkTheme 变量的类型，它是一个布尔值。

声明类型后，2 个错误消失了，但仍然有 4 个错误！

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

我使用了任何天黑后的主题，这不是一个好的做法，但我不知道类型

现在我收到这些错误：

我认为我的项目的主要问题是我试图将 javascript 与 typescript 集成。我不知道这是否正常，但我这样做是因为有些组件用 typescript 编写起来要容易得多，而一些更基本的组件用 javascript 编写更好。

这是我的 app.js 的一部分：

// Context

export const ThemeContext = React.createContext();

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

  return (
    <ThemeContext.Provider value={[darkTheme, setDarkTheme]}>

，当我在这个组件中使用该函数时，它工作得很好：

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

import Button from 'react-bootstrap/Button';

export default function DarkThemeTest() {
    const [darktheme, setDarkTheme] = useContext(ThemeContext);

    return (
        <Button onClick={() => {
            setDarkTheme(!darktheme);
        }}>
            Theme: {darktheme && "Dark" || "Light"}
        </Button>
    )
}

Answer 1

首先，为上下文值定义类型

import { createContext, Dispatch, SetStateAction } from "react";

interface ThemeContextType {
  darkTheme: boolean;

  // this is the type for state setters
  setDarkTheme: Dispatch<SetStateAction<boolean>>; 
}

然后，使用此类型创建上下文并使用默认值对其进行初始化。这可能看起来没有必要，但它将避免稍后检查null或undefined上下文

export const ThemeContext = createContext<ThemeContextType>({
  darkTheme: false,
  setDarkTheme: () => {}, // no-op default setter
});

创建状态值和设置器后，将它们设置到上下文提供程序值中

<ThemeContext.Provider value={{ darkTheme, setDarkTheme }}>

useContext现在，您可以通过完整的类型支持轻松解构上下文值

const { darkTheme, setDarkTheme } = useContext(ThemeContext);

您可以继续使用数组格式，但我不推荐它。

type ThemeContextType = [boolean, Dispatch<SetStateAction<boolean>>];

export const ThemeContext = createContext<ThemeContextType>([false, () => {}]);

和

<ThemeContext.Provider value={[darkTheme, setDarkTheme]}>