求助：将含initialState的React Context JSX转换为TSX

import { createContext, useContext, useState, ReactNode, SetStateAction, Dispatch, ChangeEvent } from "react";

// 定义initialState的结构类型，约束可操作的面板键名
type InitialStateType = {
  chat: boolean;
  cart: boolean;
  userProfile: boolean;
  notification: boolean;
};

// 完整定义Context的类型，包含所有状态与操作函数
interface StateContextType {
  currentColor: string;
  currentMode: string;
  activeMenu: boolean;
  screenSize: number | undefined;
  isClicked: InitialStateType;
  initialState: InitialStateType;
  themeSettings: boolean;
  setScreenSize: Dispatch<SetStateAction<number | undefined>>;
  handleClick: (clicked: keyof InitialStateType) => void;
  setIsClicked: Dispatch<SetStateAction<InitialStateType>>;
  setActiveMenu: Dispatch<SetStateAction<boolean>>;
  setCurrentColor: Dispatch<SetStateAction<string>>;
  setCurrentMode: Dispatch<SetStateAction<string>>;
  setMode: (e: ChangeEvent<HTMLInputElement>) => void;
  setColor: (color: string) => void;
  setThemeSettings: Dispatch<SetStateAction<boolean>>;
}

// 初始化Context并提供默认值，避免useContext调用时出现类型错误
export const StateContext = createContext<StateContextType>({
  currentColor: "#03C9D7",
  currentMode: "Light",
  activeMenu: true,
  screenSize: undefined,
  isClicked: {
    chat: false,
    cart: false,
    userProfile: false,
    notification: false,
  },
  initialState: {
    chat: false,
    cart: false,
    userProfile: false,
    notification: false,
  },
  themeSettings: false,
  setScreenSize: () => {},
  handleClick: () => {},
  setIsClicked: () => {},
  setActiveMenu: () => {},
  setCurrentColor: () => {},
  setCurrentMode: () => {},
  setMode: () => {},
  setColor: () => {},
  setThemeSettings: () => {},
});

// 定义Provider组件的props类型
type ContextProviderProps = {
  children?: ReactNode;
};

export const ContextProvider = ({ children }: ContextProviderProps) => {
  const [screenSize, setScreenSize] = useState<number | undefined>(undefined);
  const [currentColor, setCurrentColor] = useState<string>("#03C9D7");
  const [currentMode, setCurrentMode] = useState<string>("Light");
  const [themeSettings, setThemeSettings] = useState<boolean>(false);
  const [activeMenu, setActiveMenu] = useState<boolean>(true);

  const initialState: InitialStateType = {
    chat: false,
    cart: false,
    userProfile: false,
    notification: false,
  };

  const [isClicked, setIsClicked] = useState<InitialStateType>(initialState);

  const setMode = (e: ChangeEvent<HTMLInputElement>) => {
    setCurrentMode(e.target.value);
    localStorage.setItem("themeMode", e.target.value);
  };

  const setColor = (color: string) => {
    setCurrentColor(color);
    localStorage.setItem("colorMode", color);
  };

  const handleClick = (clicked: keyof InitialStateType) => {
    setIsClicked({ ...initialState, [clicked]: true });
  };

  return (
    <StateContext.Provider
      value={{
        currentColor,
        currentMode,
        activeMenu,
        screenSize,
        setScreenSize,
        handleClick,
        isClicked,
        initialState,
        setIsClicked,
        setActiveMenu,
        setCurrentColor,
        setCurrentMode,
        setMode,
        setColor,
        themeSettings,
        setThemeSettings,
      }}
    >
      {children}
    </StateContext.Provider>
  );
};

export const useStateContext = () => useContext(StateContext);

核心类型说明 #

• InitialStateType：约束initialState和isClicked的结构，避免拼写错误或新增无效字段。
• StateContextType：明确Context对外暴露的所有状态与方法的类型，让TypeScript能在校验Context使用时提供准确提示。
• keyof InitialStateType：给handleClick的参数加约束，确保传入的只能是initialState中存在的键名（如'chat'、'cart'），防止无效调用。
• ChangeEvent：给setMode的事件参数指定类型，明确这是输入元素的变更事件，TypeScript会自动提示e.target.value等合法属性。

内容的提问来源于stack exchange，提问作者Kareem Abbas