如何在 typescript 中使用“useContext”？

Question

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

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

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

但是当我将它写入 typescript 时，我得到 6 个错误。

我知道其中一些变量需要声明其类型，但我只知道darkTheme 变量的类型，即boolean。

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

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

我使用了任何 after dark 主题，这不是一个好习惯，但我不知道类型

现在我得到这些错误：

我认为我的项目的主要问题是我正在尝试将 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]}>

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

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
});

创建 state 值和设置器后，将它们设置为上下文提供程序值

<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]}>