TS2322：当我将 useContext 与函数一起使用时出现类型错误

Question

我很想通过 Provider value ={ ..} 传递我想要对更改做出反应的状态和功能。 我有一个接受 userId 和 token 的登录功能和一个不接受任何东西的注销功能。 在 AuthContext 中，我创建了一个接口，声明了函数接受的类型，但仍然出现 TS2322 错误。

错误是：

TS2322：类型'{用户ID：字符串|空值;令牌：字符串 |空值; isLoggedIn：布尔值；登录：（令牌：字符串，uid：字符串）=> void；注销：() => 无效； }' 不可分配给类型 'Auth'。对象字面量只能指定已知属性，而 'Auth' 类型中不存在 'login'。

AuthContext.tsx

import {createContext} from "react";

interface Auth{
  userId:string | null;
  token: string | null;
  isLoggedIn: boolean;
  (t:string | null, id:string | null) : void;
  (): void;
}

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

App.tsx

import {AuthContext} from "./shared/context/AuthContext";

const App: React.FC = () => {

const [token, setToken] = useState<string | null>(null);
const [userId, setUserId] = useState<string | null>(null);

const login = useCallback((token:string, uid:string) => {
    setToken(token);
    setUserId(uid);
}, []);

const logout = useCallback(() => {
    setToken(null);
    setUserId(null)
}, []);

return (
    <AuthContext.Provider value={{
        userId: userId,
        token: token,
        isLoggedIn: !!token,
        login: login, //  **** TS2322 Error at this line ****
        logout: logout
    }}>
        <div className="App">
            <BrowserRouter forceRefresh={true}>
                <Switch>
                    <Route exact path="/">
                        <Home/>
                    </Route>
                    <Route path="/login">
                        <LoginForm/>
                    </Route>
                    <Route path="/signup">
                        <RegisterForm/>
                    </Route>
                    <Route path="/cart">
                        <Cart/>
                    </Route>
                    <Redirect to="/" from="*"/>
                </Switch>
            </BrowserRouter>
        </div>
    </AuthContext.Provider>
);
}

export default App;

Answer 1

错误信息实际上很清楚。您需要在 Auth 接口上专门定义登录/注销属性。

interface Auth{
  userId:string | null;
  token: string | null;
  isLoggedIn: boolean;
  login(token:string | null, uid:string | null) : void;
  logout(): void;
}