接口 MouseEvent 和 TouchEvent 的 React Typescript 事件类型

Question

我正在尝试编写一个函数来处理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”。

和

错误：(90, 13) TS2339：“MouseEvent |”类型上不存在“touches”属性触摸事件'。 “MouseEvent”类型不存在“touches”属性。

如何在没有所有这些错误的情况下使用React.TouchEvent和React.MouseEvent接口？

Answer 1

通过检查条件中的instanceof TouchEvent和instanceof MouseEvent并使用event的nativeEvent属性，可以nativeEvent地访问每个单独的界面。

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

Answer 2

我将使用 TypeScript 的类型谓词。 代码更具可读性。

例如

import React, { Component } from 'react';

function isTouchEvent(e: React.TouchEvent | React.MouseEvent): e is React.TouchEvent {
  return e && 'touches' in e;
}

function isMouseEvent(e: React.TouchEvent | React.MouseEvent): e is React.MouseEvent {
  return e && 'screenX' in e;
}

export default class MyComponent extends Component {
  onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    if (isTouchEvent(event)) {
      console.log(event.touches);
    }
    if (isMouseEvent(event)) {
      console.log(event.screenX);
    }
  };

  render() {
    return <div>my component</div>;
  }
}