对两种类型的事件使用相同的事件处理程序时出现打字稿错误答案

【问题标题】：typescript error when using same event handler for two types of events对两种类型的事件使用相同的事件处理程序时出现打字稿错误
【发布时间】：2022-09-28 14:43:57
【问题描述】：

我有一个函数，它需要两个不同的事件对象，一个用于触摸屏，另一个用于鼠标输入。 TypeScript 在访问仅可用于其中一个事件的类型时显示错误。

const desktopDragHandler = (
    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
) => {
        //depending on touch screen or mouse we have different properties
        let position = { x: 0, y: 0 };
        if (e.type === \"touchmove\") { //we have a touch event
            let evt = typeof e.originalEvent === \"undefined\" ? e : e.originalEvent;
            let touch = evt.touches[0] || evt.changedTouches[0];
            position.x = touch.pageX;
            position.y = touch.pageY;
        } else { //we have a mouse event
            position.x = e.clientX;
            position.y = e.clientY;
        }
}

ts 在访问e.originalEvent 和e.clientX or e.clientY 时显示错误。如何解决这里的类型错误？

标签： reactjs typescript react-typescript

【解决方案1】：

TypeScript 不够聪明，无法知道 e.type === "touchmove" 是这两种类型之间的区别，您必须手动对其进行类型转换：

let evt = typeof (e as React.TouchEvent<HTMLDivElement>).originalEvent === "undefined" ? e : (e as React.TouchEvent<HTMLDivElement>).originalEvent;

position.x = (e as React.MouseEvent<HTMLDivElement>).clientX;
position.y = (e as React.MouseEvent<HTMLDivElement>).clientY;

下次请创建一个reproducible example，我只是在猜测这里发生了什么。

【讨论】：

【解决方案2】：

尝试这个：

const desktopDragHandler = (
    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
) => {
        //depending on touch screen or mouse we have different properties
        let position = { x: 0, y: 0 };
        if (e instanceof React.TouchEvent<HTMLDivElement>) { //we have a touch event
            let evt = typeof e.originalEvent === "undefined" ? e : e.originalEvent;
            let touch = evt.touches[0] || evt.changedTouches[0];
            position.x = touch.pageX;
            position.y = touch.pageY;
        } else { //we have a mouse event
            position.x = e.clientX;
            position.y = e.clientY;
        }
}

【讨论】：

【解决方案3】：

我正在使用这种方式。这是模态组件。处理了两个鼠标事件关闭和保存按钮单击。尝试这个。

import React, { FC, MouseEventHandler } from "react";
import styles from './Modal.module.scss'

interface ModalProps {
  modalTitle: String,
  handleModalSaveClick?: MouseEventHandler
  handleModalCancelClick?: MouseEventHandler
}

const Modal: FC<ModalProps> = ({handleModalSaveClick, modalTitle, 
handleModalCancelClick} : ModalProps) => {

return (
  <div className="modal fade show" id="exampleModalLong" role="dialog" aria- 
  labelledby="modal" aria-hidden="true" style={{ display: "block", paddingRight: 
  "17px", opacity: 1 }}>
    <div className="modal-dialog modal-dialog-centered" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="modal">{modalTitle}</h5>
          <button type="button" className="close" data-dismiss="modal" aria- 
            label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div className="modal-body">
            
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-secondary" data- 
           dismiss="modal" onClick={handleModalCancelClick}>Close</button>
          <button type="button" className="btn btn-primary" onClick= 
           {handleModalSaveClick}>Save changes</button>
        </div>
      </div>
    </div>
  </div>
 )
}

export default Modal

【讨论】：