> Как типизировать компонент и пропсы в TypeScript? (React, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Исходный Код

Стек: React, TypeScript

> Пример ответа

Для типизации компонента и пропсов в TypeScript используется интерфейс или тип, который описывает структуру пропсов. Затем этот тип передается в дженерик React.FC (или React.FunctionComponent) или указывается напрямую в параметрах функционального компонента.

Пример с интерфейсом и React.FC:

TSX
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

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

Более современный и рекомендуемый подход - без React.FC, с явным указанием типа пропсов:

TSX
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button = ({ label, onClick, disabled }: ButtonProps) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

Для детей (children) можно использовать встроенный тип React.ReactNode:

TSX
interface CardProps {
  title: string;
  children: React.ReactNode;
}

const Card = ({ title, children }: CardProps) => {
  return (
    <div>
      <h2>{title}</h2>
      {children}
    </div>
  );
};