Как правильно обработать события в React+Typescript?

Question

[Илья Коротков]

Добрый день всем!
Работаю над функцией закрытия модалок по ESC в проекте на React+Typescript
Столкнулся со следующей проблемой: при навешивании обработчика событий на элемент TS не принимает тип React.KeyBoardEvent, указанный как тип параметра event в соответствующей функции:

const closeByESC = (event: React.KeyboardEvent) => {
    if (event.key === "Escape") {
      return closePopup();
    }
  }
...
    document.addEventListener('keydown', (event) => {
      return closeByESC(event); - ошибка. "Аргумент типа "KeyboardEvent" нельзя назначить параметру типа 
               "KeyboardEvent<Element>". В типе "KeyboardEvent" отсутствуют следующие свойства из типа 
               "KeyboardEvent<Element>": locale, nativeEvent, isDefaultPrevented, isPropagationStopped, persist"
    })

Описание ошибки говорит само за себя, в реактовском синтетическом событии присутствуют некоторые свойства, которых видимо нет в стандартном 'keydown'. Если тип параметра указать KeyboardEvent, все работает. Стало интересно, какие есть пути решения данной проблемы. Если можете поделиться примерами кода, вдвойне благодарен.

Answer 1

[Aetae]

Ну да.
React.KeyboardEvent - это синтетическое событие, которое генерируется в React.
KeyboardEvent - это оригинальное событие, которое генерируется в браузере.
KeyboardEvent лежит в event.nativeEvent у React.KeyboardEvent.

Если вам в принципе пофиг откуда событие в функцию будет прилетать, и вас интересуют только общие свойства - сделайте так:

const closeByESC = (event: KeyboardEvent | React.KeyboardEvent) => {

P.S. Ну и лишних обёрток не надо: document.addEventListener('keydown', closeByESC);