Как получить общий интерфейс из объединения React.FC?

Для получения общего интерфейса из объединения React.FC (React Functional Component) можно воспользоваться следующими шагами:

1. Определите интерфейс, который будет представлять общий интерфейс всех React.FC компонентов. Назовем его, например, CommonComponentProps. В этом интерфейсе вы можете объявить все необходимые свойства и методы, которые должны быть доступны для всех компонентов. Например:

interface CommonComponentProps {
  id: string;
  name: string;
  handleClick: () => void;
}

2. Создайте новый тип, который будет являться объединением React.FC компонентов и CommonComponentProps. Назовем его, например, ComponentType. Используйте оператор & для объединения типов:

type ComponentType = React.FC & CommonComponentProps;

3. Теперь вы можете использовать ComponentType вместо React.FC для определения компонентов, которые должны иметь доступ к общему интерфейсу. Например:

const MyComponent: ComponentType = ({ id, name, handleClick }) => {
  return (
    <div>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

4. Теперь MyComponent будет иметь доступ к свойствам id, name и handleClick, определенным в CommonComponentProps, и может быть использован как обычный React.FC компонент. Например:

<MyComponent id="1" name="Example" handleClick={() => console.log('Clicked!')} />

Этот подход позволяет создать общий интерфейс для всех компонентов в проекте, имеющих определенный набор свойств и методов. Также он облегчает поддержку кода и повторное использование компонентов, так как теперь вы можете использовать ComponentType вместо React.FC при объявлении компонентов.