Типы React, о которых вы не знали

Типы React, о которых вы не знали

Поработав в нескольких компаниях, я заметил, что код всегда набирается по-разному, и это может привести к некоторым проблемам с типизацией в будущем.

Я хочу показать вам, как сделать код лучше типизированным так, как вы, вероятно, не знали.

Функция Тип компонента

Прежде всего, мы должны выяснить, как лучше всего определить функциональный компонент.

Обычно разработчики инициализируют компоненты, используя функции по умолчанию, поэтому код будет выглядеть так:

Такой подход имеет ряд недостатков:

• Всегда нужно писать возвращаемый тип
• Если ваш компонент принимает какие-либо дочерние элементы, вам необходимо определить свойство `children` в вашем типе Props и установить тип объединения типов, например `null | Реактузел | ReactNode[]` или `null | РеагироватьЭлемент`
• Поскольку вам нужно использовать один из вышеперечисленных типов для ваших детей, вы также должны импортировать их.

Все эти проблемы делают ваш код более «шаблонным» и делают его менее читабельным, затрачивая на это больше времени, чем вы можете.

Лучшим решением для этого являются типы FC или FunctionComponent. «FC» — это просто сокращение от «FunctionComponent»:

Давайте посмотрим, что это за `FunctionComponent`:

Здесь нам также нужно проверить тип `PropsWithChildren`, чтобы убедиться, что мы будем передавать свойства компонента:

Теперь давайте посмотрим, как выглядит компонент типа FC:

Текущее решение решает такие проблемы:

• Мы отделяем значения от типов, перемещая общий тип в начало, делая код более читабельным.
• Нам не нужно писать возвращаемый тип функции
• Поскольку мы используем стрелочную функцию², в некоторых случаях мы можем опускать фигурные скобки и напрямую возвращать jsx.
• Используя везде один и тот же тип компонента, мы предотвращаем несоответствие типов, которое может привести к пустой трате времени из-за определения типа, вместо того, чтобы тратить его на решение реальных проблем.
• Нам больше не нужно определять тип children¹

1 — Имейте в виду, что планируется удалить `children` как свойство по умолчанию из `FunctionComponent` в `@types/[email protected]`
2 – Если вы используете инструменты разработчика React, вы должны заметить эту стрелку функции не имеют `displayName` по умолчанию, поэтому вы должны определить его вручную:

Тип обычных реквизитов/атрибутов HTML

Вероятно, у вас были проблемы с определением реквизитов для компонентов, которые передают большую часть своих реквизитов дальше обычному элементу HTML.

Ранее я встречал такие решения, как импорт `HTMLAttributes` из модуля `react`, а затем передача ему типа `HTML…Element` в качестве общего аргумента:

Этот тип не подходит для повторного использования, потому что мы не можем получить реквизиты пользовательского компонента, и именно здесь появляется `ComponentProps`:

Тип свойства CSS

Если вы используете решения css-in-js, иногда вам нужно, чтобы ваш компонент принимал определенные свойства CSS, переданные глубже в стили компонента.

Вы можете просто установить тип свойства как объединение типов: `number | string`, но он неспецифичен и может привести к непредвиденному поведению из-за опечаток при использовании таких свойств, как `position`, `flex-direction` и т.д.

Лучшее решение — использовать тип `CSSProperties`, экспортированный из модуля `react`:

Такие мелочи могут улучшить качество вашего кода и уберечь вас от проблем с Typescript.