TypeScript 与 React 的 useContext？ 财产不存在

Question

尝试将 TypeScript 与 React 的 useContext 一起使用。 以为我已经弄清楚了，但在我解构自定义挂钩时收到一条错误消息，指出道具不存在。

这是我的自定义挂钩 - 我看到的没有 TypeScript 错误

type AppContext = {
  handleLogin: HandleLogin;
};

type HandleLogin = (email: string, password: string) => void;

const AuthContext = createContext<AppContext | null>(null);

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState(null);

  const router = useRouter();

  // Handle login
  const handleLogin: HandleLogin = async (email: string, password: string) => {
    const userData = await login(email, password);
    setUser(userData);
  };

  return (
    <AuthContext.Provider value={{ handleLogin }}>
      {children}
    </AuthContext.Provider>
  );
};

但是当我像这样破坏钩子时......

  const { handleLogin } = useAuth();

我收到以下错误 - * 属性“handleLogin”在类型“AppContext | 上不存在” 无效的'。*

如果我在上下文的值中包含另一个值或 function 但遇到相同的错误，我会得到相同的错误。 真的不确定我错过了什么。

Answer 1

您将 context 的初始值分配为null ，因此在重组时需要确保 context 不是 null 。 或者您可以告诉 typescript context 将始终是AppContext 。

const AuthContext = createContext<AppContext>({} as AppContext);

它是类型安全的，因为当您的组件使用上下文时，该值将在 Provider 上设置。