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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мерси

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