Если проект на TypeScript, именно он должен быть главным источником типов. Но PropTypes все еще полезны в двух случаях: когда кодовая база на JavaScript и когда ты хочешь проверять публичный API React-компонента во время разработки.

Простейший пример выглядит так:

import PropTypes from "prop-types";
import React from "react";

class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    );
  }
}

BlogPost.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
};

export default BlogPost;

PropTypes не заменяют статическую типизацию, но помогают быстро поймать некорректные props в dev-режиме.

Какие типы можно использовать

Основные типы:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol

Один из нескольких типов:

const valueProp = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number,
]);

Одно из фиксированного набора значений:

const sizeProp = PropTypes.oneOf(["sm", "md", "lg"]);

Экземпляр конкретного класса:

class User {}

const authorProp = PropTypes.instanceOf(User);

Любой ReactNode, который React умеет рендерить:

const childrenProp = PropTypes.node;

Любой тип без ограничений:

const anythingProp = PropTypes.any;

Массив определенного типа:

const tagsProp = PropTypes.arrayOf(PropTypes.string);

Объект с ожидаемой структурой:

const themeProp = PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number,
});

Свойство isRequired

isRequired делает проп обязательным и выводит предупреждение, если его не передали:

BlogPost.propTypes = {
  title: PropTypes.string.isRequired,
  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
};

Практически это значит следующее: title и tags считаются частью контракта компонента, а не необязательным довеском.

Когда PropTypes все еще уместны

Сегодня PropTypes разумно оставлять там, где:

  • проект пока на JavaScript, а не на TypeScript;
  • компонент публикуется как библиотека для JS-потребителей;
  • нужно явно документировать публичные props прямо рядом с компонентом.

Если проект уже типизирован TypeScript и не экспортирует JS-API наружу, PropTypes обычно только дублируют информацию и быстро устаревают.