Наткнулся на статью "Clean React with TypeScript", где автор делится опытом TypeScript в React-приложениях, он описывает, как постепенно разобрался в тонкостях типизации и оптимизации кода, а также выделяет ключевые моменты

Типизация компонентов: Примеры, как правильно типизировать props, children и HTML-элементы.

Управление состоянием: Использование хуков useState и useReducer для работы с типизированными состояниями.

Refs и события: Как работать с ссылками на элементы и передавать их через forwardRef.

Немного распишу здесь интересные для меня моменты.

Работа с children Для передачи дочерних элементов React предоставляет специальный тип PropsWithChildren, который добавляет поддержку children к вашим пропсам.

`import { PropsWithChildren } from 'react';

type Props = { title: string; };

function ProductTile({ title, children }: PropsWithChildren) { return (

{title} {children}

); }

Если компоненту нужны только дочерние элементы, то можно использовать PropsWithChildren без дополнительных пропсов.

Проброс пропсов (Piping Props) Когда один компонент пробрасывает пропсы в другой, можно избежать повторного определения типов, используя ComponentProps, который извлекает типы пропсов компонента.

`import { ComponentProps } from 'react'; import ProductTile from './ProductTile';

type Props = { color: string; } & ComponentProps;

function ProminentProductTile({ color, ...props }: Props) { return (

); }

Здесь ComponentProps автоматически добавляет типы пропсов компонента ProductTile в ProminentProductTile.

Передача компонентов Если нужно передать целый компонент как пропс, можно использовать ComponentType, который типизирует компоненты и их пропсы.

`import { ComponentType } from 'react';

type ProductTileProps = { title: string; description?: string; };

type Props = { render: ComponentType; };

function ProductTile({ render }: Props) { return render({ title: "Sample", description: "Description" }); }

Инференция пропсов При использовании компонентов с пропсом as можно автоматически выводить типы в зависимости от переданного компонента.

`type BoxProps = { as: T; } & JSX.IntrinsicElements[T];

function Box({ as, ...props }: BoxProps) { const Component = as; return ; }

// Пример использования This is a div

Этот подход часто используется в библиотеках компонентов для создания гибких интерфейсов.````