Generic компоненты
Тема дорожной карты · React
Generic-компоненты в React — это компоненты с поддержкой TypeScript, использующие параметры типов для сохранения гибкости и типобезопасности при работе с разными формами данных, — аналогично обобщённым функциям в TypeScript. Определяя компонент с параметром обобщённого типа (например, function List<T>({ items, renderItem }: ListProps<T>)), React-разработчики могут создавать переиспользуемые UI-примитивы — списки, таблицы, селекты и грид-компоненты, — работающие с любым типом данных при полной поддержке IntelliSense и проверке на этапе компиляции. Generic-компоненты устраняют необходимость в типах any или дублировании нескольких вариантов компонента, делая их ключевым инструментом для создания строго типизированных React-библиотек компонентов. JSX-синтаксис для generic-компонентов требует замыкающей запятой в .tsx-файлах (например, <T,>) для устранения неоднозначности параметра типа и HTML-тега при JSX-парсинге TypeScript. Освоение generic-компонентов — продвинутый навык React и TypeScript, значительно улучшающий переиспользование кода и опыт разработчика в крупных фронтенд-кодовых базах.
Как это работает
Generic компоненты типизирует props, state, refs и события компонентов. Function-компоненты типизируются как function C(props: Props): JSX.Element или const C: React.FC<Props> (последнее спорно — теперь предпочитают явный return type). Типы событий — из namespace React: React.MouseEvent<HTMLButtonElement>, React.ChangeEvent<HTMLInputElement>. Generics делают компоненты переиспользуемыми между типами: function Select<T>(props: {items: T[], onChange: (item: T) => void}). Utility-типы (Partial, Pick, Omit, Required) производят выводные типы props из существующих.
Когда применять
Добавляйте TypeScript в любой новый React-проект >~500 строк или с >1 автором — фрикция минимальна, безопасность огромна. Типизируйте props явно (interface Props {...}); избегайте any и as-кастов (escape hatches, скрывают баги). Generics — для переиспользуемых list/select/form-компонентов. Опирайтесь на strict mode/strictNullChecks — они ловят тихие undefined-баги, которые скрывает чистый JavaScript.
Типичные ошибки
Ловушки Generic компоненты: any повсюду, потому что типизировать было сложно (теряете смысл — чините или используйте unknown); as Type-касты, лгущие компилятору; не сужающийся ReactNode (рендерится всё, включая случайные boolean); борьба с inference у useState для nullable значений (useState<User|null>(null) — явно); сверхсложные generic-constraints в shared-компонентах. Когда типы больно — больно и дизайну: рефакторите, не кастуйте.