reactjs - TS2322: Chyba typu při používání useContext s funkcí

Snažím se předat přes Provider hodnotu={ ..} stavy a funkce, na které chci, aby React reagoval při změnách. Mám funkci login, která přijímá userId a token, a funkci logout, která nic nepřijímá. V AuthContext jsem vytvořil rozhraní, které deklaruje typy, které funkce přijímají, ale stále dostávám chybu TS2322.

Chyba je:

TS2322: Typ '{ userId: string | null; token: string | null; isLoggedIn: boolean; login: (token: string, uid: string) => void; logout:() => void; }' nelze přiřadit k typu 'Auth'. Literál objektu může specifikovat pouze známé vlastnosti a 'login' neexistuje v typu 'Auth'.

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;

Odpověď č. 1

Chybová zpráva je vlastně docela jasná. Musíte specificky definovat vlastnosti login/logout v rozhraní Auth.

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