Типизация props в React

Типизация props — это основа безопасной передачи данных между компонентами в React при использовании TypeScript. Она позволяет явно описать, какие данные ожидает компонент, и предотвращает ошибки на этапе разработки.

Объявление интерфейса для props

Для описания структуры пропсов используется interface. Это особенно удобно, когда компонент принимает объект с несколькими полями:

interface ButtonProps {
  title: string;
  onClick: () => void;
}

Здесь компонент ожидает строку title и функцию onClick, которая ничего не возвращает.

Применение типа к компоненту

После объявления интерфейса его нужно указать в параметрах функционального компонента:

function Button({ title, onClick }: ButtonProps) {
  return <button onClick={onClick}>{title}</button>;
}

Опциональные пропсы

Если пропс может отсутствовать, его помечают знаком вопроса:

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

Теперь disabled можно не передавать. При использовании внутри компонента TypeScript будет считать его типом boolean | undefined.

Значения по умолчанию и деструктуризация

Можно задать значение по умолчанию прямо в деструктуризации:

function Button({ title, onClick, disabled = false }: ButtonProps) {
  return (
    <button disabled={disabled} onPress={onClick}>
      {title}
    </button>
  );
}

TypeScript корректно поймёт, что внутри функции disabled имеет тип boolean, даже если он был опциональным в интерфейсе.

Важно помнить

Не используйте any для обхода типизации — это сводит на нет все преимущества TypeScript.