如何通过TypeScript在React应用程序中使用消费者？

import React from 'react';

const ConsumerContext = React.createContext<any>(null);

export const ConsumerProvider: React.FC = ({ children }) => {
  // 在这里提供消费者的值，例如API调用、身份验证信息等
  const consumerValue = {
    // 消费者的一些属性和方法
  };

  return (
    <ConsumerContext.Provider value={consumerValue}>
      {children}
    </ConsumerContext.Provider>
  );
};

export const useConsumer = () => {
  const consumer = React.useContext(ConsumerContext);
  if (!consumer) {
    throw new Error('Consumer must be used within a ConsumerProvider');
  }
  return consumer;
};

import React from 'react';
import { useConsumer } from './ConsumerContext';

const MyComponent: React.FC = () => {
  const consumer = useConsumer();

  // 使用消费者的属性和方法
  consumer.someMethod();

  return (
    // 组件的JSX代码
  );
};

export default MyComponent;

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { ConsumerProvider } from './ConsumerContext';
import MyComponent from './MyComponent';

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

export default App;