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 上設置。