пью код пишу пиво
17.10
Наткнулся на статью "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
Этот подход часто используется в библиотеках компонентов для создания гибких интерфейсов.````
еще контент в этом сообществе
еще контент в этом соообществе
пью код пишу пиво
17.10
войдите, чтобы увидеть
и подписаться на интересных профи