Типизация неуправляемой формы в React

[@victormog]

Кратко, качественно и по существу! Однозначно, буду использовать в своих проектах (вместо кучи useState)

[@gregpozdnykov3539]

Спасибо за видео, реакт + тс - мастхэв, при этом не так уж и много хороших пособий об этом. Хотелось бы в будущем увидеть что-то о типизации хуков.

[@andrewsam224]

Cпасибо, огромное Михаил!!! Снимайте ещё, очень доступно объясняете. Вы делаете этот мир лучше!!!

[@andrewsam224]

Охереть как круто! Я прям кайфую от разбора.

[@andrewsam224]

Я бы с удовольствием бы посмотрел уроки длинной 40+ минут. Очень качественно. Спасибо.

[@STELLS541]

Очень классно и элегантно) 🙏🏻💪🏻

[@АндрейФилиппов-з3и]

ой какая же круть, супер полезный контент, низкий поклон правда, на курсах даже не найдешь такого)

[@protonys]

Это просто класс! Спасибо!

[@nikolaysmolov8031]

Михаил, спасибо за видео! Инфа годная, рассказываешь хорошо, приятно слушать. Успехов!

[@andrewsam224]

Миша, мне кажется твоим голосом нужно вообще все обучалки озвучивать. Очень хорошо поставлена интонация, размеренно плавно уверенно. Красава!!!!

[@vadymkononenko685]

Супер! Спасибо за видео! Лайк! #react #typescript #javascript #js #ts

[@alexles5003]

Интересный подход спасибо

[@ДмитрийЛавров-ж7м]

Часто бывает, что названия полей в форме соответсвует названием полей в типе используемых данных формы (хоть и не всегда). Сейчас в Вашем примере Вы отдельно объявляете FormFields и LoginFormFields. И там и там одинаковые названия "свойств". Чтобы этого избежать, можно использовать такую конструкцию: type FormFields = { [F in keyof LoginFormFields]: HTMLInputElement }; Тогда, при добавлении нового поля в форму (fullName, например) нужно будет расширить только один тип - LoginFormFields

[@profesor08]

Фактически получили дыру, так как типизация хоть и есть, но она только на словах и ничего не гарантирует. Если не окажется полей с нужными именами, то получим call property of undefined, прямо в рантайме. Тут надо типизировать сам компонент формы, чтоб в зависимости от переданного ему типа, он требовал бы наличие определенных полей с конкретным именем, ну и соответственно самостоятельно выводил бы свой тип, на основе переданных полей и их имен.

[@denissorokin6823]

При такой реализации Form, получается мы не может динамически валидировать вводимые данные, только встроенной валидацией и всю форму?

[@DennaRal]

Мерси

[@ringnull]

9:45 formFields откуда берется? ты его не импортишь, откуда он там берется?

[@CyberGenius777]

Эти значения приходят из полей форм при onSubmit

[@ringnull]

@@CyberGenius777 Каким образом? Я понимаю, что они туда должны приходить, но в элементе просто вызов функции без параметров. Как он понимает, что это именно те значания, которые нужны?

[@CyberGenius777]

@@ringnull почитай как форма работает

[@ringnull]

@@CyberGenius777 там где-то реф стоит и я не заметил этого или что?

[@fergussawyer]

@@ringnull вообще то объявляет этот тип прямо в этом файле 6:28, если все еще не понятно, то под видео есть ссылка на код из видео, открой и посмотри

[@lexandersuslov1745]

Спасибо за видео, узнал дополнительную информацию о типизации ивентов. Попробовал воспользоваться твоим способом, но столкнулся с проблемой. При использовании Rеact Testing Library при тестировании формы в фунции обработчике handleChange падает ошибка event.currentTarget.submitBtn is undefined. Однако в браузере все работает. Пока не нашел в чем причина. Возможно ты знаешь в чем дело? UPD: Нашел решение. В моем случае нужно к искомому элементу обращаться e.currentTarget.elements.submitBtn. Но тогда сам евент достаточно типизировать как обычно, а elemets нужно типизировать как пересечение типов HTMLFormControlsCollection & FormFields