SolidJS中useContext返回unknown类型引发TypeScript报错的问题求助

嘿，我一眼就看出你这问题出在哪啦——你创建CartContext的时候没给它指定明确的TypeScript泛型类型，导致TS没法推断出上下文值的类型，所以才会抛出Property 'state' does not exist on type 'unknown'的错误。咱们一步步来改就行：

问题根源 #

你原本的Context创建代码是这样的：

export const CartContext = createContext<>();

这里的<>是空的，没有指定泛型参数，TS就会默认把Context的类型设为unknown，自然识别不出state和setState这些属性。

修复步骤 #

1. 定义Context值的类型
   首先咱们得明确Context要传递的value是什么类型——就是Provider里的{ state, setState }。其中state是你已经定义的StatesT类型，而setState是SolidJS的createStore返回的类型，也就是SetStoreFunction<StatesT>，记得要从solid-js/store里导入这个类型哦。

可以单独定义这个类型：

import { SetStoreFunction } from "solid-js/store";

type CartContextValue = {
  state: StatesT;
  setState: SetStoreFunction<StatesT>;
};

2. 创建带类型的Context
   把刚才定义的类型传给createContext：

export const CartContext = createContext<CartContextValue>();

3. 优化useCartContext钩子（可选但推荐）
   为了防止有人在CartContextProvider外面误用这个钩子，咱们可以给钩子加个判断，确保它只能在Provider内部使用，同时让TS更明确返回值的类型：

export const useCartContext = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCartContext必须在CartContextProvider内部使用哦！");
  }
  return context;
};

完整修改后的代码 #

import { createContext, Component, useContext } from "solid-js";
import { createStore, SetStoreFunction } from "solid-js/store";

// 先定义Provider的props类型（如果之前没定义的话）
type CartContextProviderProps = {
  children: JSX.Element;
};

const stateDefault = {
  // 这里放你的默认状态内容
};
export type StatesT = typeof stateDefault;

// 定义Context值的类型
type CartContextValue = {
  state: StatesT;
  setState: SetStoreFunction<StatesT>;
};

// 创建带类型的Context
export const CartContext = createContext<CartContextValue>();

export const CartContextProvider: Component<CartContextProviderProps> = (props) => {
  const [state, setState] = createStore<StatesT>(stateDefault);

  return (
    <CartContext.Provider value={{ state, setState }}>
      {props.children}
    </CartContext.Provider>
  );
};

export const useCartContext = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCartContext必须在CartContextProvider内部使用哦！");
  }
  return context;
};

这样改完之后，你在组件里用const { state, setState } = useCartContext();的时候，TS就能正确识别出它们的类型，不会再报错啦！

备注：内容来源于stack exchange，提问作者Russo