In my SolidJS and SolidStart project, I declared my CartContext
in my CartContext.tsx
export const CartContext = createContext<>();
const stateDefault = { ... };
export type StatesT = typeof stateDefault;
export const CartContextProvider: Component<CartContextProviderProps> = (
props: CartContextProviderProps,
) => {
const [state, setState] = createStore<StateT>(stateDefault);
return (
<CartContext.Provider value={{ state, setState }}>
{props.children}
</CartContext.Provider>
);
};
export const useCartContext = () => useContext(CartContext);
But when I use this context in my components:
const { state, setState } = useCartContext();
TypeScript gave me warning: Property 'state' does not exist on type 'unknown'.ts(2339)
Okay I figured it out.
I needed to add a type at createContext()
according to the CartContext.Provider value={{ state, setState }}
:
export type cartContextType = {
state: StatesT;
setState: (state: StatesT) => void;
};
export const CartContext = createContext<cartContextType>();
Then TypeScript gave me another warning: Property 'state' does not exist on type 'cartContextType | undefined'.ts(2339)
according to this docs: https://docs.solidjs.com/reference/component-apis/create-context, you need to handle context === undefined
case:
export const useCartContext = () => {
const context = useContext(CartContext);
if (!context) throw new Error("CartContext is not valid");
return context;
};