具有Typescript泛型的React上下文API

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

// 定义主题类型
interface Theme {
  backgroundColor: string;
  color: string;
}

// 创建一个泛型上下文
const ThemeContext = createContext<Theme | undefined>(undefined);

// 提供上下文的组件
const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<Theme>({
    backgroundColor: 'black',
    color: 'white',
  });

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

// 消费上下文的组件
const ThemedButton: React.FC = () => {
  const theme = useContext(ThemeContext);

  if (!theme) {
    throw new Error('useContext was called without a Provider');
  }

  return (
    <button style={{ backgroundColor: theme.backgroundColor, color: theme.color }}>
      Click me
    </button>
  );
};

// 应用入口
const App: React.FC = () => {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
};

export default App;