如何使用react和typescript在同一组件文件中使用上下文？

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

interface MyContextType {
  data: string;
  updateData: (newData: string) => void;
}

const MyContext = createContext<MyContextType | undefined>(undefined);

const MyComponent: React.FC = () => {
  const context = useContext(MyContext);

  if (!context) {
    throw new Error('MyComponent must be used within a MyContextProvider');
  }

  const { data, updateData } = context;

  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={() => updateData('New Data')}>Update Data</button>
    </div>
  );
};

interface MyContextProviderProps {
  children: React.ReactNode;
}

const MyContextProvider: React.FC<MyContextProviderProps> = ({ children }) => {
  const [data, setData] = React.useState('Initial Data');

  const updateData = (newData: string) => {
    setData(newData);
  };

  const contextValue: MyContextType = {
    data,
    updateData,
  };

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
};

const App: React.FC = () => {
  return (
    <MyContextProvider>
      <MyComponent />
    </MyContextProvider>
  );
};