Типизация компонентов React/React Native не всегда необходима, тип обычно неявно определяется оператором возврата, но иногда нам это необходимо, и есть несколько подходов к типизации.
Вероятно, наиболее распространенным является использование интерфейса, уже предоставленного react: FC, что означает Functional Component, если компонент принимает реквизиты, нам нужно только добавить на него типы реквизитов: FC.
Другой, неявный по возвращаемому типу, это JSX.Element, который также широко используется, и, до появления React 18, этот подход был более надежным.
Минусы использования React.FC
До React 18 существовала потенциальная проблема с использованием FC, он по умолчанию имеет неявный реквизит children, поэтому любой компонент с типом FC мог передать ему children:
Это больше не проблема, так как в React 18 она была удалена, так что если ваш проект работает на 18 или выше, то вам не нужно беспокоиться об этом.
Минусы использования JSX.Element
Это неявный возвращаемый тип, если вы его не объявите. Но предположим, что ваш компонент не всегда будет возвращать правильный JSX.Element, иногда мы хотим вернуть null или просто кусок строки, JSX.Element будет недостаточно, и мы начнем добавлять другие типы возврата: JSX.Element | null:
Не типизированные компоненты
Это тоже вариант, и, вероятно, он будет работать, typescript может понимать и работать с неявными типами, только не будет работать, если ваш проект придерживается правил eslint, которые требуют явно типизировать все.
Примеры использования
Базовый пример с одним и тем же типом кнопки с одной и той же функцией и двумя разными типами:
Заключение
Я не вижу веских причин использовать один вариант вместо другого, JSX все еще имеет более строгое использование, не позволяя возвращать строки или нулевые значения, но это также не является большой проблемой, чтобы не использовать его. В конце концов, это скорее вопрос того, какой тип мы хотим использовать в нашем проекте или даже не использовать, но выбор все равно остается.
Мой личный выбор — использование React.FC, большинство новых пользователей typescript находят его более простым в использовании, и, на мой взгляд, он делает код более легким для чтения.