如何在 Typescript 中正确分配和使用上下文？

Question

我写了一个非常简单的沙箱，试图更好地理解 Typescript 中的 useContext。我遇到了一些奇怪的错误，但它似乎仍然有效。

https://codesandbox.io/s/typescript-usereducer-nygts?file=/src/App.tsx

import { useEffect, useReducer, createContext, useContext } from "react";
import "./styles.css";

let AppContext = createContext(undefined);

type AppState = {
  value: number;
};

type Action = {
  type: string;
};

const initialState = {
  value: 0
};

const reducer = (state: AppState, action: Action) => {
  switch (action.type) {
    case "INCREMENT":
      state = { value: state.value + 1 };
      return state;

    default:
      return state;
  }
};

function Subscribe() {
  const { state } = useContext(AppContext);
  console.log("state", state);

  return (
    <>
      <p>subscriber</p>
      <p>state = {state.value}</p>
    </>
  );
}

export default function MyApp() {
  let [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    dispatch({ type: "INCREMENT" });
  }, []);

  console.log("TodoApp.state", state);
  return (
    <AppContext.Provider value={{ state }}>
      <Subscribe />
    </AppContext.Provider>
  );
}

我在 AppContextProvider.value 上有一个错误：

Type '{ state: AppState; }' is not assignable to type 'undefined'.ts(2322)
index.d.ts(335, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<undefined>'

另一个关于 useContext 赋值：const { state } = useContext(AppContext);

Property 'state' does not exist on type 'undefined'.

我显然正在将状态传递给订阅者及其更新，所以不确定为什么 ts 抱怨也不知道如何补救。非常感谢任何建议。

谢谢

Answer 1

您没有指定任何上下文类型。你可以这样做：

type AppContextType = {
   state: AppState
}
const AppContext = createContext<AppContextType|null>(null);

如何在 Typescript 中正确分配和使用上下文？

How do correctly assign and useContext in Typescript?

typescript

reactjs

use-context