Выпущенные в React v16.8.0, React Hooks решают ряд проблем с React и, возможно, в первую очередь для пользователей TypeScript, предоставляют первоклассное решение для повторного использования логики с отслеживанием состояния, построенное с учетом набора текста. Благодаря этому можно вывести множество типов для хуков, но в некоторых случаях необходимо установить явные типы.
В этой статье предполагается, что вы знакомы с доступными хуками. Для этого обратитесь к документации React.
useState
В большинстве случаев типы для useState могут быть выведены на основе начального значения, но если вам нужно начать с null или undefined или вам нужен больший контроль над типизацией, например, указание типов для массива или объекта, универсальный может использоваться.
useContext
useContext может определять свои типы на основе объекта контекста, который передается в качестве аргумента, поэтому нет необходимости в явной типизации.
useEffect / useLayoutEffect
Эти два крючка используются для выполнения побочных эффектов и возвращают дополнительную функцию очистки. Поскольку они не имеют дело с возвращаемыми значениями, никаких типов не требуется.
useMemo / useCallback
И useMemo, и useCallback (сокращение для мемоизирующих функций) оба имеют свои типы, выведенные из значений, которые они возвращают.
Примечание. Убедитесь, что вы указали типы параметров обратного вызова для useCallback, в противном случае они будут иметь значение any, независимо от того, установлено ли noImplicitAny в TypeScript значение true.
useRef
Исторически refs использовались для ссылки на узлы DOM или компоненты класса, при этом значение объекта ref current только для чтения начиналось с null, пока ссылка не была прикреплена. В этом случае null можно использовать в качестве начального значения, а для типа ссылки можно использовать общий:
С момента появления хуков useRef также можно использовать в качестве замены свойств экземпляра в классах, и в этом случае тип может быть выведен, и current станет изменяемым:
useReducer
Редукторы, шаблон, представленный Redux, можно типизировать аналогичным образом, с типами для действий и состояния, выведенными из редуктора, когда он передается в useReducer:
useImperativeHandle
useImperativeHandle является наиболее сложным хуком для установки типов, но также, вероятно, наименее используемым, поскольку не является распространенной (или рекомендуемой) практикой предоставлять императивные функции (дескрипторы) для компонентов.
В приведенном выше примере создается оболочка для компонента ввода HTML и предоставляется функция focus, позволяющая сфокусировать ввод. Во-первых, объявляется интерфейс MyInputHandles для указания функций, которые будут представлены через ref. Затем этот интерфейс передается в RefForwardingComponent, чтобы настроить его как компонент, которому может быть передана ссылка, что реализуется с помощью forwardRef. Отсюда useImperativeHandle может сделать вывод о типах, поэтому вы получите ошибку компиляции, если не реализуете интерфейс в качестве возвращаемого значения фабричной функции во втором аргументе.
Затем ссылку можно использовать, используя MyInputHandles в универсальном, переданном в useRef:
useDebugValue
useDebugValue используется для отображения значений в React Developer Tools и принимает значение и необязательную функцию форматирования, для которой типы могут быть выведены на основе переданного значения.
