TypeScript + React #4 Типизация событий (Typing of Events)
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- #YauhenK #webDev #TypeScript #React
Всех приветствую в курсе «TypeScript + React».
В данном видеокурсе мы с вами рассмотрим связку библиотеки React и синтаксиса TypeScript. Из библиотеки мы разберём типизацию функциональных и классовых компонентов, событий и элементов, методов жизненного цикла, контекста и портала и конечно же хуки. А в дополнение рассмотрим типизацию React-роутера и Redux.
✒ Репозиторий курса:
✔ github.com/Yau...
✒ Используемые ресурсы и инструменты:
✔ Visual Studio Code (редактор кода): code.visualstu...
✔ Create React App (рабочее окружение): github.com/fac...
✔ Redux Devtools (расширение для браузера): chrome.google....
lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ru
✔ Fake online REST API: jsonplaceholde...
✔ Redux-LocalStorage-Simple: www.npmjs.com/...
✒ Полезные ссылки:
✔ Description "tsconfig.json": gist.github.co...
✔ React Context: • React JS #15 Контекст ...
✔ React Portal: • React JS #14 Портал (R...
✔ React Typescript Cheatsheet: github.com/typ...
✔ TypeScript and React(stefan baumgartner): fettblog.eu/ty...
✔ TypeScript React Starter: github.com/Mic...
✔ React Static Type Checking: reactjs.org/do...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ TH-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
![[Re:all TREASURE] EP.6 in 방콕ㅣ🚩 쩡캠의 방콕 투어 빵 마이 와이 👍](http://i.ytimg.com/vi/uyFw-nItA_s/mqdefault.jpg)
Видео Огонь. Коротка по теме безо всякой воды. Вы делаете хорошее дело своим трудом
Спасибо большое за отзыв
Совет: если в VSCode (не знаю как в других) в jsx навести на аттрибут, задающий обработчик события, то появится подсказка с описанием типов: элемента, аттрибута, события и возвращаемого значения. Не нужно запоминать все события, можно просто копировать их из подсказок в разметке.
👍
Спасибо
Пожалуйста
Спасибо!
говорят если в комментарии написать тему видео, то будет чаще в выдает, попробуем
TypeScript & React Типизация событий
TypeScript & React Typing of Events
Да, есть такое. Через гугл очень много видеороликов нахожу по тематике без названия(например "лекция 1")
Большущее спасибо за труд!
Пожалуйста)
Евгений, спасибо
Пожалуйста)
плюсую
Спасибо большое за курс!
Спасибо огромное за отзыв)
Спасибо, Женя за отличный курс. Так держать. Даёшь 💯 к подписчиков))
Спасибо за поддержку!)
Спасибо, помог))
Пожалуйста
Спасибо! Очень полезные видео в этой серии, подписался!!
Пожалуйста)
TypeScript & React Типизация событий
TypeScript & React Typing of Events
продвигаем
👍
отличное видео! спасибо, помог)
Пожалуйста
Автору, конечно, респект за освещение важных тем, но развить такую тему на 7 минут...
Достаточно ведь просто написать метод в разметке и навести на него мышкой и любой вменяемый редактор подскажет, какой колбек он ожидает.
like + 3
👍
Здравствуйте, Евгений! Как всегда - видео Супер++, однако имею один вопрос по этой теме, ответ на который не смог нигде найти, вопрос касается типизации event.target.elements? как например вот в этом эпизоде:
const enteredDataLosses = (e: any) => {
e.preventDefault();
let elements = e.target.elements;
let timeMoment = !elements["time"] ? 0 : +elements["time"].value;
dispatch(addTimeMoment(timeMoment));
}
React.SyntheticEvent
@@YauhenKavalchuk Спасибо!!!
+
👍
А будут ли видео по TypeScript & React & MobX?
Нет
пишем код чтобы писать код, это гениально, ts не индусы случайно придумали?
Как есть…
👉 Этот комментарий создан в качестве уважения автору и для продвижения его канала.
Спасибо за поддержку
Как типизировать кейс с универсальным обработчиком ввода, когда имя поля ввода задаётся динамически? this.setState({ [evt.target.name]: evt.target.value }). Как подружить динамическое поведение со статической типизацией?
Нашёл что-то на тему (stackoverflow.com/questions/46361905/property-is-missing-in-type-x-string-string), но всё равно не очень понятно как это должно выглядеть по-хорошему. Такое ощущение, что чем больше динамики, тем больше статическая типизация добавляет сложности нежели помогает с ней справиться. Помимо того, чтобы описать абстракции программы на языке понятном модели выполнения приходится ещё и описывать типы на языке понятном линтеру. Это как разговаривать с мужиком, который делает работу на русском, а потом с управляющим, который по факту работу никакую не делает, на французском. Кажется, проще было бы для качества кода в таких кейсах оставить исчерпывающий комментарий для следующих разработчиков, чем писать магический код для типов, с которым последующим разработчикам тоже придётся немало повозиться.
Любое поле ввода возвращает строку, вот вам и тип
каким же нужно быть тупым, чтобы реально не понять о "чём" говорится в видео и поставить диз, да еще и быть в одиночестве. Хейтер, тебя не буратино случайно зовут ?_))
Спасибо за поддержку
скажи эти дженерики, типы которые в них указываются как HTMLButtonElement и тд это их реакта подтягивает или это заложено в тайпскрипте?
Большущее спасибо за ваш труд!
Большущее спасибо за отзыв)