Лимитирование пропсов в React компонентах
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Как запретить передачу тех или иных пропсов при выборе конкретных значений. Например, запретить передачу иконки для кнопки при выборе определенного варианта отображения. Разбираемся, как TypeScript может нам в этом помочь.
Код из видео codesandbox.io...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
![[กูเพิ่งซื้อมึงปิดหนี] 20 นาที ผมรีวิวเกมที่แย่ที่สุดในโลก CONCORD](http://i.ytimg.com/vi/XhC-3q3Ii7I/mqdefault.jpg)
![[TH] 2024 PMSL SEA Finals D1 | Fall | ยิงต้องโหด ให้เหมือนโกรธกันมาก่อน](http://i.ytimg.com/vi/OnTdfGySmds/mqdefault.jpg)
Отличные примеры по прикладному использованию TypeScript!
Обязательно продолжай!
весь вечер это ролик искал, помню, что у Вас где-то что-то такое было... очень крутой ход!
благодарю за ролик, случайно посмотрел и через несколько часов столкнулся с таким примером на проекте
Thank you for your complete and comprehensive training. Very good!
Класс! Спасибо! Как раз то, что нужно мне для выполнения задачи!
Typescript, условия типов, type, react, ограничения типов
ну вот и на практике пригодился этот подход - с карточкой
Отличное видео, спасибо! Такого контента не видел у других, везде в основном база
Спасибо за твой труд
Вот такой контент класс: короткими и полезными видосами! #react #ts #typescrypt #guide #code #js #javascript
Рад был бы видеть больше советов по прикладному использованию typescript, спасибо!
Спасибо! Очень полезный кейс, хотел бы видеть больше подобных видео
Отличный практический пример, спасибо Михаил.
Ты мне очень помог сейчас решить задачу в нашем проекте где требовался такой use-case!
Спасибо:)
Полезность ваших туториалов на весьма высоком уровне!
Благодарю за видео. Всё, как всегда, ясно и понятно)
Супер, огромное спасибо, очень полезный урок
по хорошему все же делать 4 варианта. но это как-то все громоздко получается. если надо не 2 или 4 пропса, а 10, то 10 вариантов делать, а если еще и вариантов несколько комбинаций, то пол кода будут только эти определяющие типы. все же как-то универсальнее и более расширяемо бы.
Формат видео топ и объяснил понятно
Большое Спасибо за видео ❤
Михаил, спасибо!
Top
А вот жаль вы не показали вариант с отдельными типами для стрелки и иконки. Не до конца понимаю, как их нужно было бы комбинировать с типами primary и secondary.
По идее так
type Props = PrimaryProps | SecondaryProps & ArrowProps | IconProps
Спасибо большое!!!
класс
Спасибо за видео - может быть полезно знать о таком описании пропов. Хотя в данном случае это выглядит как попытка бороться с изначально плохим дизайном пропов. Был бы общий проп для primary и secondary (variant, например) и ещё один для icon и arrow (стрелка это ведь тоже иконка), то никакой необходимости в таком сложном описании бы не было.
А что делать если arrow и icon все так же останутся взаимоисключающими, но смогут применяться и для primary, и для secondary? А что делать если мы добавим ещё несколько подобных пропов? Количество типов же начнёт расти в геометрической прогрессии.
спасибо, я все никак найти не мог, как типизировать компонент инпута по сценариям, ибо общий компонент работает как 5 разных
Супер , спасибо Михаил! Хотел спросить вас , в будущем планируйте записать курс по Recoil JS ?
Я пока с ним не работал. Поэтому в планах нет. Но кто знает)
а как бы выглядела типизация компонента Button если бы мы заменили свойства primary и secondary на variant: 'primary' | 'secondary' и, например через конструкцию switch case для 'primary' возвращали бы компонент PrimaryButton который ожидает пропсы типа PrimaryButtonProps, а для 'secodary' компонент SecondaryButton который ожидает пропсы типа SecondaryButtonProps?
Проп variant попал бы в CommonButtonProps, а из PrimaryButtonProps и SecondaryButtonProps можно было бы удалить primary и secondary.
Михаил, в реакт роутере произошли изменения в новой версии. Вы сможете в ближайших выпусках осветить их? Заранее благодарю
Они там намудрили)) раньше был просто роутинг, а теперь они ещё и получением данных решили заняться. Пока не решил буду ли это про это рассказывать.
Михаил, а нельзя для них задать Conditional Type?
Как вы это видите?
щас бы пропсы типами задавать, а не интерфейсами, а называть все равно интерфейсами. Вариант с вариантом более лаконичен.
Щас бы в ютубе строчить комменты, а не разрабатывать ютуб
Тут просто треба Union Type
А можно видео по декомпозиции этой кнопки по БЭМ?
А зачем это в реакте? По бэм просто модификаторы добавляются и к ним стили
@@NIReeMK есть великолепный модуль @bem-react, внутри которого есть пакет core, который позволяет в соответствии с пропсами изменять поведение рендера элемента, вместо вереницы условий, логических операторов и switch’ей. Модификаторы и стили - это хорошо, но бэм гораздо глубже.
@@munzamt насколько это вообще актуально в современной разработке? Там чёт 700 скачиваний в неделю всего и пакет год не обновлялся..
@@NIReeMK к сожалению, да, обновлений давно не было
Но это не умаляет того, насколько это потенциально может быть удобно
Utility Types не помогут сделать тоже самое?
Как именно?
@@mishanep Например, пишем общий интерфейс, затем Pick нужные свойства
Не получится. Там будет та же история, как если бы мы отказались от явного указания свойств с типом never. Т.е. вы отберете свойства, а при деструктуризации TypeScript будет ругаться, что в заявленном типе отсутствуют те или иные свойства (те самые, что присутствуют в одном типе юниона, но отсутствуют в другом).
codesandbox.io/s/great-bardeen-l3cu1x?file=/src/Button.tsx
+
просто огонь! может у вас есть что-то для мидл разработчиков или есть возможность менторства?