типа для реакт-компонента?
Например:
type ButtonProps = {
className?: string;
type?: ButtonTypes;
size?: 'md' | 'lg' | 'sm';
variant?: 'primary' | 'secondary';
inline?: boolean;
disabled?: boolean;
handleClick?: React.MouseEventHandler<HTMLElement>;
};
нужно запретить использование пропса inline совместно с size и variant. С proptypes это вроде можно сделать функцией-валидатором, а на уровне типов реально?
https://t.me/ts_ru/109962 длинный тред был сегодня на эту тему. ищи, что там попуг спрашивал и что ему отвечали
Спасибо
Судя по треду, у него ничего не вышло. Закончилось дублированием кода. Или я в глаза долблюсь.
Он мимокрокодил ТС... Я с трэда не понял, в чём именно "дублирование"...
Я могу только про себя говорить но, похоже, там была сходная ситуация. Я могу сделать два компонента: батон и инлайнбатон. Это и есть дублирование. Но я не хочу. Это просто желание — валидировать пропсы, их сочетание.
"Это и есть дублирование" Ещё раз, можете указать на "дублирование", хотя бы пример на плейграунд накидать с двумя компонентами? Тогда, может, смогу помочь
Я с телефона и сейчас не могу. Дублирование это два одинаковых компонента, но у одного есть проп инлайн, а у второго нет инлайна, но есть сайз и вариант. На основе пропсов соответственно хтмл-классы формируются. Поднялся по треду выше, завтра буду пробовать разделять типы и смотреть, что получается.
https://basarat.gitbook.io/typescript/type-system/discriminated-unions
Главный вопрос в этом всём - что у этих типов общее, что вам так хочется их объединить в один? Если есть что-то общее, которое вы используете, то выделите это в отдельный тип, и экстендите этот тип в обоих случаях - так не должно быть никакого дублирования
Тип пропсов описываешь как вот этот discriminated union и пляшешь
Общее все остальное.
Спасибо ещё раз, завтра попробую
Bad practices распространяете - учите бороться с юнион-типами, вместо того, чтоб их вообще не использовать (не знаю, возможно ли это в Реакте...)
Дублирование кода компонентов, не типов. Типы могу и заэкстендить, конечно.
А в чем проблема юнионов? Я чего-то не понимаю? Зачем с ними бороться?
Ага, а вот теперь следующий вопрос: разве Реакт не позволяет вынести общее в этих компонентах в отдельный компонент (с указанным выше общим наследуемым типом)? - как в ООП делаем композицию вместо полиморфного наследования
Позволяет. И полиморфный компонент можно легко заменить кучкой обычных. Только юнион удобнее
Затем, что у ТС нету полиморфизма функций по типам - мы в джс можем написать либо одну полиморфную функцию, либо несколько разных под каждый подтип юниона...
Не понимаю
"удобнее", но зато проблемнее в поддержке
Не замечал
С моей колокольни как раз композиция будет проблемнее и я тогда лучше продублирую. Идея валидации пропсов как в проп-тайпс мне гораздо больше нравится.
Ну, тогда жду вашего примера с "дублированием" - мне интересно, почему у вас не получается без дублирования разделить ответственность компонентов по типам....
Это один и тот же компонент просто с другим цсс-классом. Потому и не получается.
Опять про css класс слышу... Мне плевать на все эти JSX и т п. Я могу помочь только по типам в ТС, какая разница, React.JSX это или CSS.something или дженерик тип T - это для меня абстракция
Ну так мы же с визуальными штуками работаем, оттого и все проблемы.
Мне в этом всём интересно только одно: это проблемы реакта, или реакт-программеры ССЗБ?
вот смотри, полиморфный компонент и композиция
Это не ответ на мой вопрос: https://t.me/ts_ru/110119 Но посмотрю, отвечу чуть позже
inline и block — чисто высосанный из пальца пример, не смог ничего умнее придумать. но бывают ситуации, когда такие полиморфные компоненты весьма удобны и полезны
У тебя объявлено два компонента, выполняющих одну и ту же задачу
А, сорри, я думал у людей проблема с дублированием в коде, а у вас дублирование... так и не понял - где... Если вам так хочется юзать полиморфный компонент-функцию - то ССЗБ
В голове дублирование. В реакте компонент — это юнит, выполняющий обязанность. Например, показывать юзеров. Показывать в столбик или в строчку — параметр. Если показывать в столбик, то можно добавить разделитель, а если в строчку — нельзя, нет смысла. Так вот для пользователя компонента удобнее иметь один полиморфный компонент, чем кучу мономорфных. Удобно это. Меньше выбор — меньше ошибок, меньше кода. У тебя какой-то ССЗБ-культ. Ты так и не объяснил, что плохого в полиморфных компонентах. Что ССЗБ, это понятно. Не был бы буратиной, жил бы на дивиденды деда и не работал бы вообще.
Культ? Лишь потому, что люди приходят сюда всегда с вопросами по юнионам - никогда не возникало вопросов там, где ответственность на каждый тип разделена функционально 🤷♂
Не вижу причинно-следственной связи. Ну приходят, ну задают вопросы. Значит учатся, разбираются, интересуются. Не писали бы на тс — вообще не приходили бы. Все вопросы про тс задают, проблемы постоянно. Значит тс херня, надо на жс писать.
Я сюда полтора года назад тоже с банальным вопросом пришел. Но научился уже делать всё без discriminated unions - ЧЯНТД?
А я за три года научился с ними приятный код писать. ЧЯНТД?
Кстати, ты так и не сказал, что с ними не так. С людьми понятно, у людей проблемы. А с юнионами что не так?
https://t.me/ts_ru/103770 В статье всё написано (вы точно прочитали?) - там написано, что добавляя новый type в discriminated union - вам приходится сколько кода менять?..
Не читал. Это же классическая expression problem. Две крайности — два взаимоисключающих набора плюсов и минусов
Вот я предпочитаю тот подход, который следует OCP - когда мне не приходится (или минимум изменений) менять уже написанный код
Уважаю твой выбор. Я же наоборот — предпочитаю подход, когда код удобно читать и удобно писать. И переписывать. Просто я чаще читаю код, чем пишу. Поэтому мне важнее удобство восприятия, а не незыблемость кода
В любом случае спасибо за дискуссию. Я спатеньки, до новых холиваров
А я чаще удаляю код, чем пишу новый.
Good for you
˸̧̨ ͅBlack Akula˸̧̨ ͅ ̤ ̬̪: Да блин!... Можно пожалуюсь? Я трачу по полторы недели чтоб пару сотен строчек его кода удалить... Но он столько насрать успел, что я уже даже не скрываю от начальства, что эту архитектуру совершенствовать - тупиковый путь... Вот, кстати, мой последний ПР. Ровно неделю назад создал (уже после полнедели девелопмента) - сегодня в прод попал... вот так, по 200 строчек за полторы недели... И кстати (вы не поверите) - это полторы недели потрачено на резолв такой супер-пупер проблемы с прайсами на сайте (которую кроме меня никто не смог решить)
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljjQBsUBnZgORRCWbm1wMYtmAO07cyVKjACeYJHABCAVxgwIwgCqzucALwEARirXD8cAD4FmSgyGAwzlwtyQOLcJcIAmSTMGFIXhSUUtpwAMK4IOoACjhgPPoA3lRwaXAwKADmHFwA-ABcBCiOhsbqEpTpcP4M-kiFcAYQEAyowsHVgqy5DUXMMFD+WZ3pMnKNyqrqWnLMo2kAFkSYjQNDwiOp6V7AzCgGbV6Nza3tC3CLKN5t4XVoANaNyOgwAHQAshBKzEgAogA3JDCGAACWuXjaUAAPKCNB8ADJ-NpcEEAPmCAF9gqE5HAAJLCOoBKYmOIQBJ6CJRWLxHgAMjgSWxkko43kCgYEEepNpFMS1JA0WE5MpjJSVXSzGAAC8+gQQF5SvgGFllcwQJVqgCUENrjBGvgwEMQLrpOqkGh1F4zZUWSE2WFeSK6VTCcSkM7RTxLJzuQ8vXScZQkAAPWjwK3CAaKcrCIovDBvABi4Wh2zSgf5cEZifecMRAEFVEMjDBuLD4UiUcCYGiqGiqQAKCXVTI5MRFDTZXpU-Blkz4AA0GYyYX0-bjw9Hy18I8laW67DE8+qtXqVMwKAYv1XOz2ByOm+3u9HaEWwAYXiIwj3Swht3uD2bAEo9I3mXe4G8f8b+VRMTfXQPzPdQYwMFgkDuIQ+w1ABaAwYFMC4oxjRYYBABhoJ6Ts4HWYYqSXXpmCbCDfmw5gh3oJgcK4KjW2qdIAG0AAMABIkjIqCaOYTE4Lg9cAhYgBdIpBKQL9AODNdMDgJsAEJxLfBjGPoMCzjeLksibP8EjeaU5RfC5MVZaoAHozLU6N4HQzCKN6fpBgI-RFKJepRwsxi8mooRiKbK0hXUeyVyZDzLNU6pWI4riKL4uCON05h9NlJBMREopEuSuUv08iLmPYzjINi-iErpN4dT1EE0tEuBMoq4B9Ry8LGMAsLGKKALhWCrhpPSIgYCUKBhDk0dqmhbsOy4UaIqIsRdCSWysJ43oTIXPKmR-N4mwm3tdD24ozHpcVLhWOBANW9b0iSTbtp7MQ9H2ydplMHNjvZKjdn2Q5AjOl8LsuuAgqfearhubjgEef7Luu386Shxj6zWvLoWYMBrjRJJz0va9gUxaEzNR9HprSfGdrERHqiMgDgiAA Я не понимаю что я делаю не так
деструктурируешь
без деструктурирования ровно то же самое, будь то свитч или тернарка
https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljjQBsUBnZgORRCWbm1wMYtmAO07cyVKjACeYJHABCAVxgwIwgCqzucALwEARirXD8cAD4FmSgyGAwzlwtyQOLcJcIAmSTMGFIXhSUUtpwAMK4IOoACjhgPPoA3lRwaXAwKADmHFwA-ABcBCiOhsbqEpTpcP4M-kiFcAYQEAyowsHVgqy5DUXMMFD+WZ3pMnKNyqrqWnLMo2kAFkSYjQNDwiOp6V7AzCgGbV6Nza3tC3CLKN5t4XVoANaNyOgwAHQAshBKzEgAogA3JDCGAACWuXjaUAAPKCNB8ADJ-NpcEEAPmCAF9gqE5HAAJLCOoBKYmOIQBJ6CJRWLxHgAMjgSWxkko43kCgYEEepNpFMS1JA0WE5MpjJSVXSzGAAC8+gQQF5SvgGFllcwQJVqgCUENrjBGvgwEMQLrpOqkGh1F4zZUWSE2WFeSK6VTCcSkM7RTxLJzuQ8vXScZQkAAPWjwK3CAaKcrCIovDBvABi4Wh2zSgf5cEZifecMRAEFVEMjDBuLD4UiUcCYGiqGiqQAKCXVTI5MRFDTZXpU-Blkz4AA0GYyYX0-bjw9Hy18I8laW67DE8+qu32h0CVMwKAYv1X6TQi2ADC8RGEB6WENu9wezYAlHpG8zL3A3u-jfyqJjH7pn6OoxjAwWCQO4hD7DUAFoDBgUwLkA+BFhgEAGDAnoxCpT8EjeWp6jgPICHLAYzCKLDmDeaU5WDaoAHoaJqTA4CbABCXCAkfVt0jo6p6HUZgzjeLksibMiKNlJB7wubjMVZWj6IQy5kNQph0K4fpBmGKlWKJepR246oCKXXpmCbK0hXUNDly4IcmT0+ieJ4gBtAADAASJJgN+SzMUgyD3NEyikExZyAF1SLpMS5VffSHPSFz3M80CVOYHy-KSUSdT1EFgrCuAMt1YB9Wi+yeJ-OyeKKMzhUs3pqPSIgYCUKBhCY0dqmhbsOy4NrYqMsRdCSJCUJqsQm3vGSF1itIknfN4m063tdCW4ozHpcVLhWOAfwmqbqhm995p7DClonAcKhzdb2Rs9cDiOLbxp6hyLNvAarhuJLgEeHbdum2ayO+hz60mqboWYMBrjRJIjxPM9gUxaEaLBiHHrgBGFrEIHqkk79giAA
Обсуждают сегодня