Наследование — это механизм, когда один класс или компонент расширяет другой, наследуя его свойства и методы. Альтернативой наследованию является композиция — построение сложных объектов из более простых, объединяя их функциональность.

В контексте TypeScript и React композиция означает, что вместо создания иерархий классов мы создаём компоненты, которые принимают другие компоненты или функции как пропсы и комбинируют их для достижения нужного поведения.

Пример композиции в React:

type ButtonProps = { onClick: () => void; children: React.ReactNode };

const Button: React.FC<ButtonProps> = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton: React.FC<{ icon: React.ReactNode; onClick: () => void }> = ({ icon, onClick }) => (
  <Button onClick={onClick}>
    {icon}
  </Button>
);

Здесь IconButton не наследует Button, а использует его внутри себя, передавая нужные пропсы. Это повышает гибкость и переиспользуемость.

В TypeScript композиция также часто реализуется через объединение интерфейсов и передачу функций как параметров, что позволяет создавать более модульный и легко поддерживаемый код.

Как можно решить задачу, которую решает наследование, альтернативным способом? Что такое композиция в контексте TypeScript и React?