5

我正在尝试编写一个函数来处理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: 类型 'MouseEvent | 上不存在属性 'screenX' 触摸事件'。“TouchEvent”类型上不存在属性“screenX”。

和

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

我怎样才能同时使用这两个接口React.TouchEvent并且React.MouseEvent没有所有这些错误？

4

2 回答 2

11

通过检查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);
    }
};
于 2019-02-19T13:51:05.860 回答
0

我将使用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>;
  }
}
于 2021-03-11T11:55:15.987 回答