如何为非MouseEvent/KeyboardEvent属性的nativeEvent声明TypeScript类型

方法1：使用in操作符进行类型窄化 #

直接在条件判断里检查pointerId是否存在于nativeEvent中，TypeScript会自动完成类型窄化，无需额外定义工具函数：

const onChange = (event: MouseEvent | KeyboardEvent) => {
  const { nativeEvent } = event;
  if ('pointerId' in nativeEvent && nativeEvent.pointerId) {
    onToggle();
  }
};

这种方式对自定义或标准的nativeEvent类型都兼容，适合简单场景快速解决问题。

方法2：自定义类型守卫函数（复用性更强） #

如果需要在多个业务场景复用这个判断逻辑，可以定义一个类型守卫函数，明确标注符合条件的事件类型：

// 定义类型守卫，判断事件的nativeEvent是否包含有效pointerId
function hasValidPointerId(event: MouseEvent | KeyboardEvent): event is MouseEvent | KeyboardEvent & {
  nativeEvent: { pointerId: number }
} {
  return 'pointerId' in event.nativeEvent && !!event.nativeEvent.pointerId;
}

const onChange = (event: MouseEvent | KeyboardEvent) => {
  if (hasValidPointerId(event)) {
    // 此时TypeScript会自动识别event.nativeEvent存在pointerId属性
    onToggle();
  }
};

方法3：扩展自定义事件类型（解决根源兼容问题） #

如果你的自定义PointerEvent因缺少nativeEvent属性导致报错，可以通过交叉类型扩展它，同时保留MDN标准的类型特性：

// 扩展PointerEvent，添加nativeEvent属性（类型可根据实际场景调整）
type ExtendedPointerEvent = PointerEvent & {
  nativeEvent: PointerEvent;
};

// 回调参数包含扩展后的PointerEvent类型
const onChange = (event: MouseEvent | KeyboardEvent | ExtendedPointerEvent) => {
  if ('nativeEvent' in event && 'pointerId' in event.nativeEvent && event.nativeEvent.pointerId) {
    onToggle();
  }
};

原写法报错原因说明 #

• 当参数类型为MouseEvent | KeyboardEvent时，TypeScript仅能识别两者nativeEvent的公共属性集合，pointerId不属于这个集合，因此提示属性不存在。
• 改为PointerEvent时，你的自定义PointerEvent未定义nativeEvent属性，所以TypeScript提示该属性不存在。

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