在 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

在 TS 中处理事件 - 没有超载

Handling Events in TS - No overload

event-handling

dom-events

typescript