Когда мы используем компоненты высшего порядка в приложениях React / Redux / Typescript, как мы вводим составные компоненты?

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

Эта проблема

Когда мы используем Redux-compose для компоновки всех HOC, мы получаем функцию результата, а не компонент.

Цитата о типе возвращаемого значения функции compose из документации redux:

Возврат

(Функция): последняя функция, полученная путем компоновки заданных функций справа налево.

Это результат автоматического набора TS. И когда мы используем составной компонент, мы получаем следующую ошибку:

Тип элемента JSX My component не имеет конструкции или сигнатуры вызова

И первое простое и очевидное решение - использовать приведение типов и написать что-то вроде этого:

‹Скрипт src =» https://gist.github.com/VetBlack/ce8cfb4a448ce4c90bdd26fe86a25b13.js '›‹/script›

Но это обходной путь, и у него есть серьезные недостатки.

  1. Этот компонент не является строго типизированным.
  2. Ваш редактор кода не предлагает предложений для этого компонента.

Если предложения реквизита не являются критичной проблемой, то это типизация компонентов (лично для меня это одна из основных особенностей TS).

Решение

По сути, мы не можем ввести команду compose в текущих версиях TS, но мы можем предоставить типы всех наших HOCc для создания и предоставить тип нашего компонента.

‹Скрипт src =» https://gist.github.com/VetBlack/4fe64293fc898e02c5c11bd4c5760154.js '›‹/script›

Во-первых, нам нужно создать единый тип и предоставить все типы компонентов Props. В моем примере это ReturnType<typeof MapStateToProps>, ReturnType<typeof mapDispatchToProps>, PropsType, StateType.

Затем в правильном порядке, поскольку HOC предоставлены функции составления, все HOC и типы компонентов также должны быть предоставлены compose.

И наконец, что не менее важно, объединенный тип (в примере UnitedComponentType) должен быть предоставлен функции connect

Вот и все, действительно просто.

Спасибо за прочтение.

Если вам понравилась эта статья, дайте мне знать, нажав кнопку хлопка.

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