TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #266 5.92K
Полезный TypeScript для React

Хороший набор советов, как TS может помочь вам удобнее работать с React-приложениями. Якоб Пэрис делится готовыми типами и лайфхаками.

1. ReturnType — очень удобный способ получить возвращаемый тип функции. Незаменимо для колбеков.

2. Для children лучше использовать ReactNode, который одновременно и ReactElement, и фрагмент, и строка, и число — что угодно, что для реакта может быть адекватным содержимым компонента.

3. React.ComponentProps поможет достать пропсы компонента, если нужно сделать над ним обёртку или сделать что-то совместимое. Выручает, когда библиотека компонентов под капотом использует компоненты из других библиотек.

4. Вместо того, чтобы перечислять все возможные значения полей типа, лучше делать union над разными вариациями типов. То есть не { verdict: 'ok' | 'not-ok'; isOk: boolean; }, а { verdict: 'ok'; isOk: true; } | { isOk: false; verdict: 'not-ok'; }. Так TS сможет вам помогать разруливать зашитую в типы логику, а не просто подсказывать все возможные значения полей в автокомплите.

Больше советов — по ссылке.

https://www.jacobparis.com/content/react-ts
  • ❤ 52
  • 👍 35
  • 😐 8
  • 💯 4
  • ❤‍🔥 3
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →