如何在React方法中判断事件类型？解决TypeScript类型收窄失效问题

直接用instanceof TouchEvent做类型判断时，TypeScript有时无法自动在else分支将e推断为MouseEvent，这是因为DOM事件构造函数的类型守卫在部分环境下可能不生效。可以用以下两种方法解决：

方法一：通过事件type属性判断（推荐） #

利用触摸事件和鼠标事件的type字面量差异，TypeScript能自动完成类型缩小，代码更简洁可靠：

function touchMouseMove(
  e: TouchEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>
) {
  e.preventDefault();
  if (!mouseDown) return;
  
  // 通过type属性自动推断事件类型
  const position = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
  const diff = position - currentPosition;

  document.getElementById(targetId)!.style.height = `${lastClientY + diff}px`;
}

方法二：自定义类型谓词函数 #

手动定义类型守卫函数，明确告诉TypeScript如何判断事件类型：

// 自定义类型谓词，判断是否为TouchEvent
function isTouchEvent(e: TouchEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>): e is TouchEvent<HTMLDivElement> {
  return e instanceof TouchEvent;
}

function touchMouseMove(
  e: TouchEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>
) {
  e.preventDefault();
  if (!mouseDown) return;
  
  const position = isTouchEvent(e) ? e.touches[0].clientY : e.clientY;
  const diff = position - currentPosition;

  document.getElementById(targetId)!.style.height = `${lastClientY + diff}px`;
}

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