PropTypes / TypeScript
Тема дорожной карты · React
PropTypes — это встроенная в React библиотека проверки типов во время выполнения, которая валидирует пропсы, передаваемые компоненту, выводя предупреждения в консоль браузера при обнаружении несоответствия типов. В современной разработке на React с TypeScript PropTypes в значительной мере вытеснены статическими интерфейсами и аннотациями типов TypeScript, выявляющими ошибки на этапе компиляции, а не во время выполнения. Тем не менее PropTypes остаётся полезным в проектах на обычном JavaScript, где TypeScript недоступен, обеспечивая декларативный способ документирования ожидаемой формы пропсов компонента. Пакет prop-types экспортирует валидаторы — PropTypes.string, PropTypes.number, PropTypes.arrayOf и PropTypes.shape, — которые присваиваются статическому свойству propTypes компонента для задания контракта во время выполнения. Для фронтенд-команд, работающих с TypeScript, замена PropTypes типизированными интерфейсами компонентов устраняет целый класс ошибок времени выполнения и улучшает опыт разработчика через автодополнение в IDE.
Как это работает
PropTypes / TypeScript моделирует React-UI как дерево маленьких переиспользуемых единиц. Компонент — это функция, принимающая props (один объект-аргумент) и возвращающая JSX. Поток данных «родитель → ребёнок» односторонний: родители передают значения вниз через props; дети вызывают переданные через props коллбэки, чтобы сообщить наверх. props.children — специальный prop, хранящий JSX, вложенный между открывающим и закрывающим тегами. PropTypes (runtime) или TypeScript (compile-time) документируют и проверяют форму props.
Когда применять
Выносите компонент когда (а) один и тот же JSX повторяется, (б) у области UI есть ясное имя (Header, ProductCard, CommentList), (в) часть UI имеет независимый state. Не выносите слишком жадно — один 60-строчный компонент с формой часто яснее, чем 8 микрокомпонентов по разным файлам. Используйте children для "slot"-композиции; именованные props — для конкретных ролей (header={<X/>} vs <X>...</X>).
Типичные ошибки
Ловушки PropTypes / TypeScript: мутация props внутри ребёнка (props read-only — мутация это тихий баг); проброс огромных объектов через 5+ уровней детей (prop drilling — используйте Context или композицию); создание новых объектов/функций-литералов в render как props (<C onClick={() => ...}/> рендерит ребёнка каждый рендер родителя — мемоизируйте или вынесите); приём style={{...}} как prop замораживает гибкость дизайн-системы. Интерфейсы props — маленькие и именованные.