Есть ли способ типизировать compose с ts + react? приложение

Question

Есть ли способ типизировать compose с ts + react? приложение

и компоненты высшего порядка отрабатывают нормально, но появляются ошибки типизации

1. элемент, который обернут в compose JSX element type does not have any construct or call signatures. https://codesandbox.io/s/react-ts-styled-zgckw?file=/src/index.tsx
2. аргументы и возвращаемые значения композируемых функций не подходят друг другу и не вижу возможности поставить в соответствие https://codesandbox.io/s/react-ts-styled-zgckw?file=/src/components/App/App.tsx

#programming #russian #typescript

0

26.02.2021

18 ответов

38 просмотров

Maksim Автор вопроса

подозреваю, что нужно приводить арументы или результат компоуза принудительно. может у кого-то есть пример композиции функций на ts с реакт компонентами? материалов практически не обнаружил, кроме маленькой статьи с самописным compose https://rjzaworski.com/2017/09/typescript-react-compose, но это же типичная задача

0

26.02.2021

Maksim Автор вопроса

да, так пишут в доках реакта) ну, композицию функций не всегда заменишь хуками, например, в моем примере, когда тема и обертка роутера добавляются к компоненту и с хуками я предпочитают тоже действовать из обертки, а не разрастать компонент

0

26.02.2021

Андрей Звёздочка

useTheme и useRouter чем не подходит?

0

26.02.2021

Ivan 🧑‍🚀

Как раз таки заменишь, и гораздо удобнее, чем в варианте с обёртками обёрток

0

26.02.2021

Maksim Автор вопроса

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

0

26.02.2021

Ivan 🧑‍🚀

Чтобы не разрастался компонент. На правах кеков: const useThemeAndRouter = () => ({ theme: useTheme(), router: useRouter() })

0

26.02.2021

Ivan 🧑‍🚀

Ты используешь очень сложную для статической типизации конструкцию, с которой никто не хочет иметь дела

0

26.02.2021

Maksim Автор вопроса

не хочу никого обижать, но у больших любителей хуков я часто вижу компоненты в таком стиле function MyComponent() { const [a, b] = useThatHook1(); ... const [a100, b100] = useThatHook100(); } и компоненты превращабтся в простыню

0

26.02.2021

Maksim Автор вопроса

придется в ts-ignore уйти)

0

26.02.2021

Андрей Звёздочка

Причём тут Абрамов? Есть объективные критерии: 1) Проще типизация 2) Есть группировка логики 3) Есть переиспользуемость 4) Невозможно нарушить контракт

0

26.02.2021

Андрей Звёздочка

Эта простыня на порядки проще дебажится, чем цепочка хоков

0

26.02.2021

Maksim Автор вопроса

цепочка хоков дебажится отдельно с каждым

0

26.02.2021

Ivan 🧑‍🚀

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