TypeScript参数类型检查：React组件中如何编写事件类型判断条件？

嘿，这个场景我太熟悉啦！在React + TypeScript里要区分鼠标事件和键盘事件，用TypeScript的类型守卫就能轻松搞定，给你分享几种实用的写法：

方法一：通过原生事件实例判断 #

React的合成事件包装了原生事件，我们可以直接通过nativeEvent的instanceof来判断类型，TypeScript会自动做类型推断：

function foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
  if (e.nativeEvent instanceof MouseEvent) {
    // 这里TypeScript会自动识别e为React.MouseEvent<HTMLElement>
    console.log('这是鼠标事件，点击的按钮序号:', e.button);
    console.log('鼠标点击坐标:', e.clientX, e.clientY);
  } else if (e.nativeEvent instanceof KeyboardEvent) {
    // 这里自动推断为React.KeyboardEvent<HTMLElement>
    console.log('这是键盘事件，按下的按键:', e.key);
    console.log('按键对应的编码:', e.code);
  }
}

方法二：检查事件对象的专属属性 #

利用两种事件的独有属性（比如鼠标事件有button，键盘事件有key），用in操作符做类型守卫，写法更简洁：

function foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
  if ('button' in e) {
    // 此时e被推断为鼠标事件类型
    console.log('鼠标事件，点击目标:', e.currentTarget);
  } else {
    // 剩下的自然就是键盘事件类型
    console.log('键盘事件，是否按住Shift:', e.shiftKey);
  }
}

方法三：自定义类型谓词函数（适合复用场景） #

如果需要在多个地方重复判断事件类型，可以写一个自定义的类型谓词函数，让代码更复用、更清晰：

// 自定义类型守卫函数，返回布尔值同时告诉TypeScript类型
function isMouseEvent(
  e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
): e is React.MouseEvent<HTMLElement> {
  return 'button' in e;
}

function foo(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
  if (isMouseEvent(e)) {
    console.log('鼠标事件的触发元素:', e.target);
  } else {
    console.log('键盘事件的触发元素:', e.target);
  }
}

这几种方法都能完美解决你的问题，根据自己的场景选就行啦～

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