Тип события React Typescript для обоих интерфейсов MouseEvent и TouchEvent - PullRequest
Новая
       19

Тип события React Typescript для обоих интерфейсов MouseEvent и TouchEvent

0 голосов
/ 14 февраля 2019

Я пытаюсь написать функцию для обработки событий mouse и touch.Объединяя оба интерфейса React.TouchEvent и React.MouseEvent, например: 

onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    console.log('event ', event);
    if (event.touches) {
        console.log(event.touches);
    }
    if (event.screenX) {
        console.log(event.screenX);
    }
};

Журналы дают мне ожидаемый результат, и я не получаю никакой ошибки консоли, она работает так, как я ожидал.Но я получаю ошибки в моем редакторе:

Ошибка: (94, 22) TS2339: Свойство 'screenX' не существует для типа 'MouseEvent |TouchEvent.Свойство 'screenX' не существует в типе 'TouchEvent'.

и

Ошибка: (90, 13) TS2339: Свойство 'touch' не существует в типе'MouseEvent |TouchEvent.Свойство «touch» не существует для типа «MouseEvent».

Как использовать оба интерфейса React.TouchEvent и React.MouseEvent без всех этих ошибок?

1 Ответ

0 голосов
/ 19 февраля 2019

Проверяя instanceof TouchEvent и instanceof MouseEvent в условии и используя свойство nativeEvent внутри event, можно получить доступ к каждому отдельному интерфейсу без ошибок. 

onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    console.log('event ', event);
    if (event.nativeEvent instanceof TouchEvent) {
        console.log(event.nativeEvent.touches);
    }

    if (event.nativeEvent instanceof MouseEvent) {
        console.log(event.nativeEvent.screenX);
    }
};
...