我正在尝试使用React学习TypeScript，并且我正在努力使用React Context和TypeScript。下面有一个Context，我正在尝试将其转换为TypeScript，我设法为菜单创建上下文，并且它工作正常。这就是它。

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


// define the type for createContext
interface MenuStateContextType {
    activeMenu: boolean
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

// create and initialize createContext with a default value
export const MenuStateContext = createContext<MenuStateContextType>({
    activeMenu: true,
    setActiveMenu: () => { }
});



// define react's "children" prop type
type ContextProviderProps = {
    children?: ReactNode
}

export const ContextProvider = ({ children }: ContextProviderProps) => {

    const [activeMenu, setActiveMenu] = useState(true);

    return (
        <MenuStateContext.Provider
            value={{
                activeMenu,
                setActiveMenu,
            }}
        >
            {children}
        </MenuStateContext.Provider>
    )
}

// passing the MenustateContext to useContext() in order to use in the app
export const useMenuStateContext = () => useContext(MenuStateContext)

但是我正在努力实现initialState代码。如果有人能帮我把这个JSX代码转换成TSX，我将非常感激。

import React, { createContext, useContext, useState } from 'react';

const StateContext = createContext();

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

export const ContextProvider = ({ children }) => {
  const [screenSize, setScreenSize] = useState(undefined);
  const [currentColor, setCurrentColor] = useState('#03C9D7');
  const [currentMode, setCurrentMode] = useState('Light');
  const [themeSettings, setThemeSettings] = useState(false);
  const [activeMenu, setActiveMenu] = useState(true);
  const [isClicked, setIsClicked] = useState(initialState);

  const setMode = (e) => {
    setCurrentMode(e.target.value);
    localStorage.setItem('themeMode', e.target.value);
  };

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

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

  return (
    // eslint-disable-next-line react/jsx-no-constructed-context-values
    <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);