TSX компоненты
Тема дорожной карты · React
TSX-компоненты — это React-компоненты, написанные на TypeScript с расширением файла .tsx, которое позволяет компилятору TypeScript разбирать JSX-синтаксис вместе со стандартными аннотациями типов TypeScript. В TSX-компоненте пропсы описываются с помощью интерфейса или псевдонима типа TypeScript, возвращаемые типы функций аннотируются как JSX.Element или React.ReactNode, а обобщённые компоненты используют дженерики TypeScript для создания переиспользуемых типобезопасных UI-примитивов. TSX-компоненты — рекомендованный формат для всего React-кода в TypeScript-проектах, заменяющий устаревшее расширение .jsx и обеспечивающий полную поддержку IDE: автодополнение, рефакторинг и отображение ошибок типов прямо в редакторах вроде VS Code. Компилятор TypeScript (tsc) валидирует TSX-компоненты по определениям @types/react, обнаруживая несовпадающие пропсы, некорректные сигнатуры обработчиков событий и недопустимые JSX-атрибуты до попадания кода в браузер. Последовательное использование TSX-компонентов во всей кодовой базе React или Next.js — в сочетании со строгой конфигурацией TypeScript — создаёт более поддерживаемый, самодокументирующийся код с значительно меньшим количеством ошибок в продакшне.
Как это работает
TSX компоненты типизирует 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.
Типичные ошибки
Ловушки TSX компоненты: any повсюду, потому что типизировать было сложно (теряете смысл — чините или используйте unknown); as Type-касты, лгущие компилятору; не сужающийся ReactNode (рендерится всё, включая случайные boolean); борьба с inference у useState для nullable значений (useState<User|null>(null) — явно); сверхсложные generic-constraints в shared-компонентах. Когда типы больно — больно и дизайну: рефакторите, не кастуйте.