React + Typescript上下文-如何定义和使用接口？

import React, { createContext } from 'react';

interface MyContextData {
  name: string;
  setName: (name: string) => void;
}

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

const App: React.FC = () => {
  const [name, setName] = useState('');

  return (
    <MyContext.Provider value={{ name, setName }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

import React, { useContext } from 'react';
import { MyContext } from './App';

const ChildComponent: React.FC = () => {
  const { name, setName } = useContext(MyContext);

  return (
    <div>
      <p>Name: {name}</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
};