Javascript 在react应用程序（TypeScript）中设置上下文API，并将身份验证状态传递给所有组件

我有一个使用Apollo客户端的带有GraphQL的react应用程序。 我想在登录后使用

上下文API

存储userID和token，并在所有子组件内部使用它们来检查用户身份验证

我的上下文设置

import React, { createContext, useState } from 'react';

interface IAuthContext {
  auth: object;
  setAuth: Function;
}

export const AuthContext = createContext<IAuthContext | null>(null);

export const AuthProvider: React.FC<React.ReactNode> = ({ children }) => {
  const [auth, setAuth] = useState({ userId: '', getAuth: false });

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

import React，{createContext，useState}来自“React”；
接口IAuthContext{
auth：对象；
setAuth：函数；
}
export const AuthContext=createContext（null）；
导出常量AuthProvider:React.FC=（{children}）=>{
const[auth，setAuth]=useState（{userId:''，getAuth:false}）；
返回(

它在codesandbox中正常工作，但在我的本地机器中不正常。
我得到以下错误

在
App.tsx
文件中的codesandbox中，TS突出显示相同的错误，但不会中断代码。
在我的机器中，它会破坏代码，应用程序不会启动，因为它抛出的类型“object”上不存在属性“getAuth”。TS2339

，如屏幕截图所示。

它只是工作，但没有正确实现。这是一个类型脚本问题，您可以通过正确定义类型来解决

以下是您应该拥有的类型：

interface IAuth {
  userId: string;
  getAuth: boolean;
}

interface IAuthContext {
  auth: IAuth;
  setAuth: (state: IAuth) => void;
}

以下是已更新的，已修复类型问题