Что такое PropTypes?

PropTypes в React

PropTypes — это библиотека для проверки типов (type checking) пропсов в компонентах React во время выполнения. Она помогает отловить ошибки на ранней стадии разработки и делает компоненты более надежными и документированными.

Установка и базовое использование

PropTypes поставляется отдельно и должна быть установлена:

npm install prop-types

Простой пример

import PropTypes from 'prop-types';

function Welcome({ name, age, isStudent }) {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  isStudent: PropTypes.bool
};

export default Welcome;

Если передать неправильный тип пропса, в консоли браузера появится warning.

Основные типы валидации

Component.propTypes = {
  // Примитивные типы
  stringProp: PropTypes.string,
  numberProp: PropTypes.number,
  boolProp: PropTypes.bool,
  functionProp: PropTypes.func,
  objectProp: PropTypes.object,
  symbolProp: PropTypes.symbol,
  anyProp: PropTypes.any,
  
  // Специальные типы
  nodeProp: PropTypes.node,  // Любое значение, которое можно отрендерить
  elementProp: PropTypes.element,  // React элемент
  
  // Коллекции
  arrayProp: PropTypes.array,
  arrayOfStrings: PropTypes.arrayOf(PropTypes.string),
  arrayOfNumbers: PropTypes.arrayOf(PropTypes.number),
  
  // Объекты
  shapeObject: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
    email: PropTypes.string
  }),
  
  // Перечисления
  statusProp: PropTypes.oneOf(['active', 'inactive', 'pending']),
  
  // Один из нескольких типов
  idProp: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ])
};

.isRequired

Добавьте .isRequired для обязательных пропсов:

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary'])
};

// Если не передать label или onClick, будет warning

Сложный пример - массив объектов

UserList.propTypes = {
  users: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      name: PropTypes.string.isRequired,
      email: PropTypes.string.isRequired,
      isActive: PropTypes.bool
    })
  ).isRequired
};

Пользовательские валидаторы

Вы можете создать собственный валидатор:

const phoneValidator = (props, propName, componentName) => {
  const value = props[propName];
  
  if (value && !/^\d{10}$/.test(value)) {
    return new Error(
      `Invalid phone number in ${componentName}. ` +
      `Prop ${propName} must be 10 digits.`
    );
  }
};

Contact.propTypes = {
  phone: phoneValidator
};

PropTypes vs TypeScript

В современных проектах, использующих TypeScript, PropTypes уже не так критичны, так как TypeScript предоставляет статическую проверку типов:

С PropTypes:

function Button({ label, variant }) { ... }
Button.propTypes = {
  label: PropTypes.string.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary'])
};

С TypeScript:

interface ButtonProps {
  label: string;
  variant: 'primary' | 'secondary';
}

function Button({ label, variant }: ButtonProps) { ... }

Когда использовать PropTypes

• JavaScript проекты без TypeScript — используйте PropTypes обязательно
• TypeScript проекты — PropTypes менее необходимы, но могут использоваться для дополнительной валидации
• Библиотеки и open source — полезны для документирования API
• Дебаг и разработка — помогают быстро поймать ошибки в консоли

Отключение в production

PropTypes работают только в режиме разработки. Для оптимизации production сборки используйте babel плагин:

npm install --save-dev babel-plugin-transform-react-remove-prop-types