Middle+

Hoe kan een taak die door erfelijkheid wordt opgelost, op een alternatieve manier worden opgelost? Wat is compositie in de context van TypeScript en React?

sobes.tech AI

Antwoord van AI

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

В контексте 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 композиция также часто реализуется через объединение интерфейсов и передачу функций как параметров, что позволяет создавать более модульный и легко поддерживаемый код.

Vorige Volgende