Как определить тип события?

Question

[webjun]

Последнее время стараюсь писать на тс и часто сталкиваюсь с непониманием как описать события, вот например у меня есть инпут и на него я цепляю обработчик:

<input
            className="input"
            placeholder="Enter your film.."
            value={search}
            onChange={updateSearch}
          />

Далее я должен описать тип события:

const updateSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

Получаю ошибку:

Type '(event: React.KeyboardEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': altKey, charCode, ctrlKey, code, and 11 more.

Может есть какие-то таблицы с типами ивентов или какие-то расширения для тс?

Comments

[WbICHA]

А что мешает просто посмотреть что за тип на ончендже у инпута?

Answer 1

[HealSpirit]

const updateSearch: ChangeEventHandler<HTMLInputElement> = (event) => {};
или
const updateSearch = (event: ChangeEvent<HTMLInputElement>) => {};

Как это получить? Кликнуть с зажатым левым ctrl левой кнопки мыши в vscode на onChange
Попадем в типы реакта и увидим:
onChange?: ChangeEventHandler<T> | undefined;
Поймем, что ChangeEventHandler это функция, которая принимает в качестве параметра event с определенным типом (думаю пока этого достаточно, там потом можно потеряться что дальше происходит)

Comments

[webjun]

У меня сработал только такой вариант:

const updateSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value);
  };

[HealSpirit]

webjun, не поверю что с ChangeEventHandler не сработало.
Что пишет? Удалось импортировать ChangeEventHandler из реакта.
import type { ChangeEventHandler } from "react"

[webjun]

HealSpirit, ваши варианты правильные и работают если импортировать(Я по невнимательности забыл импортировать). Просто я привык писать напрямую без импортов, тот же стейт пишу так:
const [state, setState] = React.useState()

Дело вкуса, спасибо за разьяснение