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

Типы React формы. Смотрим как можно работать с неуправляемой формой без использования рефов и как это возможно с TypeScript.

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[victormog]

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

[andrewsam]

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

[gregpozdnykov]

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

[andrewsam]

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

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

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

[andrewsam]

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

[nikolaysmolov]

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

[vadymkononenko]

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

[andrewsam]

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

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

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

Тогда, при добавлении нового поля в форму (fullName, например) нужно будет расширить только один тип - LoginFormFields

[denissorokin]

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

[profesor]

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

[ringnull]

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

[lexandersuslov]

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