React Proptypes

Поскольку JavaScript является динамически типизированным языком, у нас нет способа принудительно применить тип переменной во время компиляции.

Flow и TypeScript очень помогают в данном случае, но React сам может помочь с типизацией props, а инструменты (редакторы, линтеры) могут помочь обнаружить, когда мы передаем неправильные значения еще перед запуском кода:

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.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol

Мы можем указать один из двух типов:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Мы можем указать одно из многих значений:

PropTypes.oneOf(['Test1', 'Test2']),

Мы можем указать экземпляр класса:

PropTypes.instanceOf(Something);

Мы можем указать любой React node (всё что React может отобразить): числа, строки, элементы или массив (фрагмент).

PropTypes.node;

Или вообще любой тип:

PropTypes.any;

Массивы имеют специальный синтаксис, который мы можем использовать для принятия массива определенного типа:

PropTypes.arrayOf(PropTypes.string);

Объект принимает определенную форму:

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

Свойсто isRequired

Добавление isRequired к любому параметру PropTypes приведет к тому, что React вернет ошибку, если это свойство отсутствует, так как делает его обязательным:

PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,