接口 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” '鼠标事件 |触摸事件'。财产 “TouchEvent”类型上不存在“screenX”。

和

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

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

Answer 1

通过检查条件中的instanceof TouchEvent 和instanceof MouseEvent 并使用event 中的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 的type predicates。代码更具可读性。

例如

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