Вопрос с собеседования · Frontend

Как типизировать обработчики событий в React с TypeScript?

JuniorTypeScript
Ещё спрашивают так:
  • Какой тип у события onChange?
Коротко

События React имеют типы с параметром элемента: ChangeEvent&lt;HTMLInputElement&gt;, MouseEvent&lt;HTMLButtonElement&gt;, FormEvent&lt;HTMLFormElement&gt;, KeyboardEvent. Если обработчик написан инлайн в JSX, тип выводится сам. Для вынесенного обработчика — тип параметра или тип функции: ChangeEventHandler<HTMLInputElement>. e.target у change-события поля — сам input, e.currentTarget — элемент с обработчиком.

  • Типы событий импортируют из react, а не глобальные DOM-типы
  • Для select — HTMLSelectElement, textarea — HTMLTextAreaElement
  • e.target.value — всегда строка, числа приводят

А ещё Подсказка: наведите курсор на onChange в редакторе — он покажет нужный тип

Подробно

function handleChange(e: ChangeEvent<HTMLInputElement>) { setName(e.target.value); }
const onSubmit: FormEventHandler<HTMLFormElement> = e => { e.preventDefault(); };
<input onChange={handleChange} />

Что хотят услышать

  • ChangeEvent, MouseEvent, FormEvent с типом элемента.
  • Вывод типа инлайн.
  • Типы обработчиков.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓onChange поля — ChangeEvent<HTMLInputElement>; инлайн в JSX тип выводится сам
  • ✗Событие в React всегда типизируется как any, потому что события синтетические
  • ✗e.target.value у поля type="number" — уже число, приводить его к Number не нужно
  • ✗Для событий React используют глобальный тип Event из DOM, как в обычном JavaScript

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования