如何使用反應打字稿修復“{}”上不存在的屬性？

Question

我正在嘗試使用typescript為我的ReactJS應用程序全局設置登錄狀態。 我在文件中聲明了上下文並導入到 App.tsx 文件中。

export const loginContext = createContext({});

在 App.tsx 文件中，我創建了一個狀態並將變量和函數作為對象提供。

import { loginContext } from "./context";

const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
    <loginContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
    ...
    </loginContext.Provider>
)

現在我想訪問另一個文件中的isLoggedIn變量

我試圖通過寫作來做到這一點，

import { loginContext } from "../context";

const { isLoggedIn, setIsLoggedIn } = React.useContext(loginContext);

但是打字稿向我顯示以下錯誤，

類型“{}”上不存在屬性“isLoggedIn”。

類型“{}”上不存在屬性“setIsLoggedIn”。

任何幫助，將不勝感激

Answer 1

您應該在創建上下文的位置定義適當的默認值。 像這樣的東西。

export const loginContext = createContext({
 isLoggedIn: false,
 setIsLoggedIn: (value: boolean): void => {}
});