reactjs - MouseEvent 和 TouchEvent 接口(interface)的 React Typescript 事件类型

Question

我正在尝试编写一个函数来处理鼠标和触摸事件。通过结合React.TouchEvent和React.MouseEvent两个接口(interface)，像:

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);
    }
};

日志为我提供了预期的输出，并且我没有收到任何控制台错误，它按我的预期运行。但我的编辑器出现错误:

Error:(94, 22) TS2339: Property 'screenX' does not exist on type 'MouseEvent | TouchEvent'. Property 'screenX' does not exist on type 'TouchEvent'.

和

Error:(90, 13) TS2339: Property 'touches' does not exist on type 'MouseEvent | TouchEvent'. Property 'touches' does not exist on type 'MouseEvent'.

如何使用接口(interface) React.TouchEvent 和 React.MouseEvent 而不会出现所有这些错误？

Answer 1

通过检查条件中的 instanceof TouchEvent 和 instanceof MouseEvent 并使用 event 内的 nativeEvent 属性，可以毫无错误地访问每个单独的接口(interface)。

onStart = (event: React.SyntheticEvent) => {
    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);
    }
};