169 похожих чатов

А куда копать если хочется валидации комбинаций пропсов в определении

типа для реакт-компонента?

Например:
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 это вроде можно сделать функцией-валидатором, а на уровне типов реально?

51 ответов

21 просмотр

https://t.me/ts_ru/109962 длинный тред был сегодня на эту тему. ищи, что там попуг спрашивал и что ему отвечали

Sergey-Bekharsky Автор вопроса

Спасибо

Sergey-Bekharsky Автор вопроса

Судя по треду, у него ничего не вышло. Закончилось дублированием кода. Или я в глаза долблюсь.

Он мимокрокодил ТС... Я с трэда не понял, в чём именно "дублирование"...

Sergey-Bekharsky Автор вопроса

Я могу только про себя говорить но, похоже, там была сходная ситуация. Я могу сделать два компонента: батон и инлайнбатон. Это и есть дублирование. Но я не хочу. Это просто желание — валидировать пропсы, их сочетание.

"Это и есть дублирование" Ещё раз, можете указать на "дублирование", хотя бы пример на плейграунд накидать с двумя компонентами? Тогда, может, смогу помочь

Sergey-Bekharsky Автор вопроса

Я с телефона и сейчас не могу. Дублирование это два одинаковых компонента, но у одного есть проп инлайн, а у второго нет инлайна, но есть сайз и вариант. На основе пропсов соответственно хтмл-классы формируются. Поднялся по треду выше, завтра буду пробовать разделять типы и смотреть, что получается.

https://basarat.gitbook.io/typescript/type-system/discriminated-unions

Главный вопрос в этом всём - что у этих типов общее, что вам так хочется их объединить в один? Если есть что-то общее, которое вы используете, то выделите это в отдельный тип, и экстендите этот тип в обоих случаях - так не должно быть никакого дублирования

Тип пропсов описываешь как вот этот discriminated union и пляшешь

Sergey-Bekharsky Автор вопроса

Общее все остальное.

Sergey-Bekharsky Автор вопроса

Спасибо ещё раз, завтра попробую

Bad practices распространяете - учите бороться с юнион-типами, вместо того, чтоб их вообще не использовать (не знаю, возможно ли это в Реакте...)

Sergey-Bekharsky Автор вопроса

Дублирование кода компонентов, не типов. Типы могу и заэкстендить, конечно.

А в чем проблема юнионов? Я чего-то не понимаю? Зачем с ними бороться?

Ага, а вот теперь следующий вопрос: разве Реакт не позволяет вынести общее в этих компонентах в отдельный компонент (с указанным выше общим наследуемым типом)? - как в ООП делаем композицию вместо полиморфного наследования

Позволяет. И полиморфный компонент можно легко заменить кучкой обычных. Только юнион удобнее

Затем, что у ТС нету полиморфизма функций по типам - мы в джс можем написать либо одну полиморфную функцию, либо несколько разных под каждый подтип юниона...

Не понимаю

"удобнее", но зато проблемнее в поддержке

Не замечал

Sergey-Bekharsky Автор вопроса

С моей колокольни как раз композиция будет проблемнее и я тогда лучше продублирую. Идея валидации пропсов как в проп-тайпс мне гораздо больше нравится.

Ну, тогда жду вашего примера с "дублированием" - мне интересно, почему у вас не получается без дублирования разделить ответственность компонентов по типам....

Sergey-Bekharsky Автор вопроса

Это один и тот же компонент просто с другим цсс-классом. Потому и не получается.

Опять про css класс слышу... Мне плевать на все эти JSX и т п. Я могу помочь только по типам в ТС, какая разница, React.JSX это или CSS.something или дженерик тип T - это для меня абстракция

Sergey-Bekharsky Автор вопроса

Ну так мы же с визуальными штуками работаем, оттого и все проблемы.

Мне в этом всём интересно только одно: это проблемы реакта, или реакт-программеры ССЗБ?

вот смотри, полиморфный компонент и композиция

Это не ответ на мой вопрос: https://t.me/ts_ru/110119 Но посмотрю, отвечу чуть позже

inline и block — чисто высосанный из пальца пример, не смог ничего умнее придумать. но бывают ситуации, когда такие полиморфные компоненты весьма удобны и полезны

Я, конечно, не шарю ваших Реактов... Но попробовал с типами - вроде работает... Где здесь дублирование? // Property 'padding' does not exist on type 'IntrinsicAttributes & BaseProps' // Property 'padding' is missing in type '{ color: string; }' but required in type '{ padding: number;}'

У тебя объявлено два компонента, выполняющих одну и ту же задачу

А, сорри, я думал у людей проблема с дублированием в коде, а у вас дублирование... так и не понял - где... Если вам так хочется юзать полиморфный компонент-функцию - то ССЗБ

В голове дублирование. В реакте компонент — это юнит, выполняющий обязанность. Например, показывать юзеров. Показывать в столбик или в строчку — параметр. Если показывать в столбик, то можно добавить разделитель, а если в строчку — нельзя, нет смысла. Так вот для пользователя компонента удобнее иметь один полиморфный компонент, чем кучу мономорфных. Удобно это. Меньше выбор — меньше ошибок, меньше кода. У тебя какой-то ССЗБ-культ. Ты так и не объяснил, что плохого в полиморфных компонентах. Что ССЗБ, это понятно. Не был бы буратиной, жил бы на дивиденды деда и не работал бы вообще.

Культ? Лишь потому, что люди приходят сюда всегда с вопросами по юнионам - никогда не возникало вопросов там, где ответственность на каждый тип разделена функционально 🤷‍♂

Не вижу причинно-следственной связи. Ну приходят, ну задают вопросы. Значит учатся, разбираются, интересуются. Не писали бы на тс — вообще не приходили бы. Все вопросы про тс задают, проблемы постоянно. Значит тс херня, надо на жс писать.

Я сюда полтора года назад тоже с банальным вопросом пришел. Но научился уже делать всё без discriminated unions - ЧЯНТД?

А я за три года научился с ними приятный код писать. ЧЯНТД?

Кстати, ты так и не сказал, что с ними не так. С людьми понятно, у людей проблемы. А с юнионами что не так?

https://t.me/ts_ru/103770 В статье всё написано (вы точно прочитали?) - там написано, что добавляя новый type в discriminated union - вам приходится сколько кода менять?..

Не читал. Это же классическая expression problem. Две крайности — два взаимоисключающих набора плюсов и минусов

Вот я предпочитаю тот подход, который следует OCP - когда мне не приходится (или минимум изменений) менять уже написанный код

Уважаю твой выбор. Я же наоборот — предпочитаю подход, когда код удобно читать и удобно писать. И переписывать. Просто я чаще читаю код, чем пишу. Поэтому мне важнее удобство восприятия, а не незыблемость кода

В любом случае спасибо за дискуссию. Я спатеньки, до новых холиваров

А я чаще удаляю код, чем пишу новый.

Good for you

˸̧̨ ͅBlack Akula˸̧̨ ͅ ̤ ̬̪: Да блин!... Можно пожалуюсь? Я трачу по полторы недели чтоб пару сотен строчек его кода удалить... Но он столько насрать успел, что я уже даже не скрываю от начальства, что эту архитектуру совершенствовать - тупиковый путь... Вот, кстати, мой последний ПР. Ровно неделю назад создал (уже после полнедели девелопмента) - сегодня в прод попал... вот так, по 200 строчек за полторы недели... И кстати (вы не поверите) - это полторы недели потрачено на резолв такой супер-пупер проблемы с прайсами на сайте (которую кроме меня никто не смог решить)

Sergey-Bekharsky Автор вопроса

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljjQBsUBnZgORRCWbm1wMYtmAO07cyVKjACeYJHABCAVxgwIwgCqzucALwEARirXD8cAD4FmSgyGAwzlwtyQOLcJcIAmSTMGFIXhSUUtpwAMK4IOoACjhgPPoA3lRwaXAwKADmHFwA-ABcBCiOhsbqEpTpcP4M-kiFcAYQEAyowsHVgqy5DUXMMFD+WZ3pMnKNyqrqWnLMo2kAFkSYjQNDwiOp6V7AzCgGbV6Nza3tC3CLKN5t4XVoANaNyOgwAHQAshBKzEgAogA3JDCGAACWuXjaUAAPKCNB8ADJ-NpcEEAPmCAF9gqE5HAAJLCOoBKYmOIQBJ6CJRWLxHgAMjgSWxkko43kCgYEEepNpFMS1JA0WE5MpjJSVXSzGAAC8+gQQF5SvgGFllcwQJVqgCUENrjBGvgwEMQLrpOqkGh1F4zZUWSE2WFeSK6VTCcSkM7RTxLJzuQ8vXScZQkAAPWjwK3CAaKcrCIovDBvABi4Wh2zSgf5cEZifecMRAEFVEMjDBuLD4UiUcCYGiqGiqQAKCXVTI5MRFDTZXpU-Blkz4AA0GYyYX0-bjw9Hy18I8laW67DE8+qtXqVMwKAYv1XOz2ByOm+3u9HaEWwAYXiIwj3Swht3uD2bAEo9I3mXe4G8f8b+VRMTfXQPzPdQYwMFgkDuIQ+w1ABaAwYFMC4oxjRYYBABhoJ6Ts4HWYYqSXXpmCbCDfmw5gh3oJgcK4KjW2qdIAG0AAMABIkjIqCaOYTE4Lg9cAhYgBdIpBKQL9AODNdMDgJsAEJxLfBjGPoMCzjeLksibP8EjeaU5RfC5MVZaoAHozLU6N4HQzCKN6fpBgI-RFKJepRwsxi8mooRiKbK0hXUeyVyZDzLNU6pWI4riKL4uCON05h9NlJBMREopEuSuUv08iLmPYzjINi-iErpN4dT1EE0tEuBMoq4B9Ry8LGMAsLGKKALhWCrhpPSIgYCUKBhDk0dqmhbsOy4UaIqIsRdCSWysJ43oTIXPKmR-N4mwm3tdD24ozHpcVLhWOBANW9b0iSTbtp7MQ9H2ydplMHNjvZKjdn2Q5AjOl8LsuuAgqfearhubjgEef7Luu386Shxj6zWvLoWYMBrjRJJz0va9gUxaEzNR9HprSfGdrERHqiMgDgiAA Я не понимаю что я делаю не так

деструктурируешь

Sergey-Bekharsky Автор вопроса

без деструктурирования ровно то же самое, будь то свитч или тернарка

Sergey-Bekharsky Автор вопроса

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKFEljjQBsUBnZgORRCWbm1wMYtmAO07cyVKjACeYJHABCAVxgwIwgCqzucALwEARirXD8cAD4FmSgyGAwzlwtyQOLcJcIAmSTMGFIXhSUUtpwAMK4IOoACjhgPPoA3lRwaXAwKADmHFwA-ABcBCiOhsbqEpTpcP4M-kiFcAYQEAyowsHVgqy5DUXMMFD+WZ3pMnKNyqrqWnLMo2kAFkSYjQNDwiOp6V7AzCgGbV6Nza3tC3CLKN5t4XVoANaNyOgwAHQAshBKzEgAogA3JDCGAACWuXjaUAAPKCNB8ADJ-NpcEEAPmCAF9gqE5HAAJLCOoBKYmOIQBJ6CJRWLxHgAMjgSWxkko43kCgYEEepNpFMS1JA0WE5MpjJSVXSzGAAC8+gQQF5SvgGFllcwQJVqgCUENrjBGvgwEMQLrpOqkGh1F4zZUWSE2WFeSK6VTCcSkM7RTxLJzuQ8vXScZQkAAPWjwK3CAaKcrCIovDBvABi4Wh2zSgf5cEZifecMRAEFVEMjDBuLD4UiUcCYGiqGiqQAKCXVTI5MRFDTZXpU-Blkz4AA0GYyYX0-bjw9Hy18I8laW67DE8+qu32h0CVMwKAYv1X6TQi2ADC8RGEB6WENu9wezYAlHpG8zL3A3u-jfyqJjH7pn6OoxjAwWCQO4hD7DUAFoDBgUwLkA+BFhgEAGDAnoxCpT8EjeWp6jgPICHLAYzCKLDmDeaU5WDaoAHoaJqTA4CbABCXCAkfVt0jo6p6HUZgzjeLksibMiKNlJB7wubjMVZWj6IQy5kNQph0K4fpBmGKlWKJepR246oCKXXpmCbK0hXUNDly4IcmT0+ieJ4gBtAADAASJJgN+SzMUgyD3NEyikExZyAF1SLpMS5VffSHPSFz3M80CVOYHy-KSUSdT1EFgrCuAMt1YB9Wi+yeJ-OyeKKMzhUs3pqPSIgYCUKBhCY0dqmhbsOy4NrYqMsRdCSJCUJqsQm3vGSF1itIknfN4m063tdCW4ozHpcVLhWOAfwmqbqhm995p7DClonAcKhzdb2Rs9cDiOLbxp6hyLNvAarhuJLgEeHbdum2ayO+hz60mqboWYMBrjRJIjxPM9gUxaEaLBiHHrgBGFrEIHqkk79giAA

Похожие вопросы

Обсуждают сегодня

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта