如何为 React 的 useContext 添加类型定义？

Question

interface AppState {
jwt: string | null,
isSignedIn: boolean
isLoading : boolean;
newUser : boolean;
avatar : Avatar | null;
alerts : SnackBarAlert[];
}
const initialState : AppState = { isLoading : true, isSignedIn : false, newUser : false, hero : null, alerts : [], jwt : null };
const store = createContext(initialState);
const { state, dispatch } = useContext(store);

当我将鼠标悬停在状态或分派上时，我得到"属性'状态'不存在于类型'AppState'上。"类型'AppState'上不存在属性'dispatch' .">

我对自己说，我需要告诉useContext商店是什么类型。但是当我试图描述商店....

interface Store {
state: AppState
dispatch: <Payload = {}>(action: Action<Payload>) => void
} 
const { state, dispatch } = useContext<Store>(store);

'store'变成高亮显示，告诉我:'Context'类型的参数不能赋值给'Context'类型的形参。Provider.propTypes的类型。值'在这些类型之间不兼容。类型'Validator'不能赋值给类型'Validator'。类型'AppState'不能赋值给类型'Store'.">

我在这里做错了什么?

Answer 1

我刚刚查看了类型定义:

/**
* Accepts a context object (the value returned from `React.createContext`) and returns the current
* context value, as given by the nearest context provider for the given context.
*
* @version 16.8.0
* @see https://reactjs.org/docs/hooks-reference.html#usecontext
*/
function useContext<T>(context: Context<T>/*, (not public API) observedBits?: number|boolean */): T;

这意味着您的状态由T表示。通过调用React.createContext得到Context<T>，它作为参数context传递给函数useContext。useContext返回给定状态T本身。在你的例子中，状态由

给出

interface AppState {
jwt: string | null,
isSignedIn: boolean
isLoading : boolean;
newUser : boolean;
avatar : Avatar | null;
alerts : SnackBarAlert[];
}

但是通过使用解构赋值const { state, dispatch } = useContext<Store>(store);，你假设state和dispatch是你状态的一部分，根据上面的定义，这是不正确的。

所以您不必为useContext添加类型定义。它是自动推断出来的。你只需要尊重它所推断的。

这也意味着你必须自己定义和提供一个dispatch函数，如果你想提供一种方法来改变你的状态值。