#23: 🍕 React Pizza v2 — Типизация onClick, onChange и Event (TypeScript)

React Pizza V2 — Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.

❤️ Поддержка:

📝 Полный стек:
- ReactJS 18
- TypeScript
- Redux Toolkit (хранение данных / пицц)
- React Router v6 (навигация)
- Axios + Fetch (отправка запроса на бэкенд)
- React Hooks (хуки)
- Prettier (форматирование кода)
- CSS-Modules / SCSS (стилизация)
- React Content Loader (скелетон)
- React Pagination (пагинация)
- Lodash.Debounce
- Code Splitting, React Loadable, useWhyDidYouUpdate

Таймкоды: еще не готовы

🔗 Следите за обновлениями и информацией в:

[andriizatsepin]

Классно, что во многих уроках ты даже показываешь как гуглить! Ни разу не видел обучение по тому, как правильно гуглить... Круто когда ищешь проблему в режиме онлайн!

[SpauN-]

Начиная с 30 минуты идут танцы с бубнами, в итоге пришлось писать костыли.
Так как метод patch уже не поддерживается, то вместо него вы должны были использовать composedPath(), что бы его типизировать можно использовать встроенные тип MouseEvent в самом TS, Важно не импортировать MouseEvent из React и не писать React.MouseEvent, а то будет ошибка)

Скидываю свой код целиком.
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (sortRef.current && {
setOpenPopup(false);
}
};

document.body.addEventListener('click', handleClickOutside);

return () => document.body.removeEventListener('click', handleClickOutside);
}, []);

Получилось намного короче, просто типизируем event: MouseEvent и добавляем проверку на null sortRef.current &&, Надеюсь кому то будет полезно🙂

[oksjlgi]

Я ели ели маленькими шагами дошёл сюда (это не негативный комментарий, просто вышло что у меня такой путь). И вот я наконец то здесь, прошло где то 2 недели и я рад, что через все эти трудности я смог пройти, ещё 4 урока и я закончу этот курс и перейду к изучению нового. Всем терпения и удачи в этом пути

[gwfxmsq]

Ден спасибо за супер подробное объяснение TS, так много роликов на эту тему, но ни кто подробно не объясняет почему нужно типизировать именно так 👍

[Tauron]

А у меня почему-то const handleClickOutside = (event: MouseEvent ) => {
if (sortRef.current && {
setOpen(false);
никаких ошибок TS не вызвало. Может из-за composedPath()?

[uotgtkj]

День 14.
День 14-й. Урок #23 завершен. Еще три урока. Дэну респект #23**23.

[GreenHappyHelix]

непонятно что за костыли городит автор курса на 40 минуте, можно просто:

const handleClickOutside = (e: MouseEvent) => {
const current = sortRef.current;
const path = e.composedPath();
if (current && !path.includes(current)) {
setOpen(false);
}
}

[gbazhina]

Спасибо большое, многое стало понятнее!!

[multtanker]

классный урок) полгода назад проходил курс в HTMLAcademy и там первый раздел это изучение TS голопом по европе) во втором разделе уже там немного начинаешь писать и типизировать) кое-какие обработчики событий вешаешь)но как типизировать объекты событий в обработчиках никто не объяснил)и приходилось гуглить и искать доп инфу)спасибо за Урок) Прям курс очень классный

[VENOM-rleo]

При практике на сайте у себя, паралельно смотрю твой видос, научился многому благодаря тебе:)

[dnryuwi]

спасибо за доходчивое и простое объяснение TypeScript onClick, onChange и Event

[melenium]

наконец то поняла как типизировать event !
хотя ранее проходила курс по TS.
спасибо

[rustamakhmetyanov]

Типизация onClick, onChange и Event (TypeScript) / React / спасибо за курс

[IntegrationsCv]

Умение искать проблему в поисковиках, чатах - очень полезный навык.
Если не показывать - то самому тяжело будет додуматься! ))

[yastrebov_dev]

Если вы использовали composedPath() вместо psth, то по идее "MpuseEvent" и проверки в "if" через "&&" должно быть достаточно

[blackalex]

if you type inline onChange={(event) =>
TS its catching what type it is

[matvienko_p]

01.2024: столкнулся с такой проблемой, что при введении типизации в проекте, получаю конфликт зависимостей. т.к. в package.json прописан typescript версии ^5.3.3, а библиотека react-scripts поддерживает только до версии 4.xx. Поэтому в package прописал версию 4.9.5 без домика ^ - и всё заработало. а то так даже npm install перестал срабатывать. Проблема в том, что react-scripts не обновляется уже пару лет.

[senails]

насколько я понимаю то 33:14 у тебя там не реактовский ивент, а джава скриптовский

он ведь в юз эффекте и там обычный слушатель addEventListerner

[whiteguards]

Когда надо типизировать просто параметр event входящий в функцию, пишется React.ChangeEvent, а когда целую функцию React.ChangeEventHandler

[cryptoelik]

чтобы лучш понимать понятия, переводите на русский. handler от слова хэнд - рука, то есть ручник, но по факту обработчик(работаем то мы руками!) а вообще to handle это управлять