reactjs - 你能强制一个组件只能在打字稿中的某个上下文提供者下使用吗？

Question

标题总结了它。有什么方法可以为组件键入预期的可用上下文，因此如果您使用 typescript 在上下文提供程序之外使用组件，则会出现 TS 错误？

const MyContext = createContext<string>(undefined!);

const Consumer = () => {
  const text = useContext(MyContext);
  return <div>{text}</div>;
};

const WithProvider = () => (
  <MyContext.Provider value={"test"}>
    <Consumer />
  </MyContext.Provider>
);

const Without = () => <Consumer />;

我希望 WithProvider 能够正常工作，而无需抛出 TS 错误。

标签： reactjstypescriptreact-context