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”。属性类型'TouchEvent'上不存在'screenX'。

和

错误：（90，13）TS2339：类型上不存在属性“ touches” 'MouseEvent | TouchEvent”。属性类型'MouseEvent'不存在'touches'。

如何在没有所有这些错误的情况下同时使用界面React.TouchEvent和React.MouseEvent？

Answer 1

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

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

我将使用 type predicates 的 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>;
  }
}

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

2 个答案: