React+TypeScript中同时使用鼠标与触摸事件的类型错误解决咨询

错误原因 #

TypeScript无法确定函数参数e是React.MouseEvent还是React.TouchEvent，直接访问仅属于单一类型的属性（比如MouseEvent的pageX、TouchEvent的touches）会触发类型检查错误——联合类型仅允许访问两种类型共有的属性。

解决方案：类型窄化（类型守卫） #

通过类型守卫判断事件具体类型，再安全访问对应属性：

方法1：使用in操作符直接判断 #

修改事件处理函数：

const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
  if (!ref.current) return;
  const startX = 'touches' in e ? e.touches[0].pageX : e.pageX;
  setStartX(startX);
};

方法2：自定义类型守卫函数 #

如果需要多次判断，可封装复用的类型守卫：

// 自定义类型守卫，判断是否为触摸事件
function isTouchEvent(e: React.MouseEvent | React.TouchEvent): e is React.TouchEvent {
  return 'touches' in e;
}

const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
  if (!ref.current) return;
  const startX = isTouchEvent(e) ? e.touches[0].pageX : e.pageX;
  setStartX(startX);
};

修正JSX属性写法 #

原JSX中事件属性的写法错误，需将onMouseDown和onTouchStart作为<ul>的属性：

<ul ref={ulRef} onMouseDown={handleStart} onTouchStart={handleStart} />

原理说明 #

类型守卫会明确告知TypeScript当前e的具体类型，从而允许访问该类型独有的属性。'touches' in e是最简单的判断方式——TouchEvent包含touches属性，而MouseEvent没有。

内容的提问来源于stack exchange，提问作者pvp11