Обработка событий в TS - без перегрузки

Question

У меня есть функция _onClick , которая прослушивает события нажатия или касания в зависимости от устройства, поэтому мое событие относится к типу MouseEvent или TouchEvent.

В useEffect addEventListener жалуется на сообщение: Этот вызов не соответствует перегрузке (2769).

Как правильно записать это, чтобы избежать ошибки TS?

const _onClick = (e: MouseEvent & TouchEvent):void => {
  e.preventDefault();

  const positionX = (e.touches && e.touches[0].pageX) || e.clientX;
};


useEffect(() => {
  if (tablet) {
    document.addEventListener('touchstart', _onClick);
  }
    document.addEventListener('mousedown', _onClick);
  }
}, []);

Answer 1

Поскольку e может быть либо MouseEvent, либо TouchEvent, вы должны использовать тип объединения (|), а не тип пересечения (&). Тип пересечения означает, что e были бы MouseEvent и TouchEvent одновременно.

Чтобы различать два случая (и получать доступ к определенным свойствам для каждого типа), вы можете использовать тип inохранник:

const _onClick = (e: MouseEvent | TouchEvent): void => {
    e.preventDefault();

    const positionX = 'touches' in e ? e.touches[0].pageX : e.clientX;
};

declare const tablet: boolean;
if (tablet) {
    document.addEventListener('touchstart', _onClick);
} else {
    document.addEventListener('mousedown', _onClick);
}

Play