Utility types
Тема дорожной карты · React
Утилитарные типы в контексте React с TypeScript — встроенные mapped и conditional типы: Partial<T>, Required<T>, Readonly<T>, Pick<T, K>, Omit<T, K>, Record<K, V>, ReturnType<F> и Parameters<F> — широко используются для получения типов пропсов компонентов, форм состояния и сигнатур функций из существующих типов без дублирования. В React Partial<Props> полезен при создании компонентов-обёрток со значениями по умолчанию, а Omit<ButtonProps, 'onClick'> позволяет открыть пропсы компонента без тех, которые вы хотите контролировать внутри. Утилитарный тип React.ComponentProps<typeof Component> извлекает полный тип пропсов существующего React-компонента, позволяя HOC и компонентам-обёрткам типобезопасно пробрасывать все пропсы. React.PropsWithChildren<P> добавляет children: React.ReactNode к существующему типу пропсов — это удобно для layout и контейнерных компонентов. Освоение утилитарных типов в разработке на React TypeScript снижает boilerplate, улучшает переиспользование типов и делает крупные кодовые базы более устойчивыми к рефакторингу.
Как это работает
Utility types типизирует 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.
Типичные ошибки
Ловушки Utility types: any повсюду, потому что типизировать было сложно (теряете смысл — чините или используйте unknown); as Type-касты, лгущие компилятору; не сужающийся ReactNode (рендерится всё, включая случайные boolean); борьба с inference у useState для nullable значений (useState<User|null>(null) — явно); сверхсложные generic-constraints в shared-компонентах. Когда типы больно — больно и дизайну: рефакторите, не кастуйте.