React+TypeScript中KeyboardEvent类型不兼容问题求助

问题核心 #

你的handleHotKeys函数参数仅接受原生KeyboardEvent，但Mantine的getHotkeyHandler期望回调能处理**原生KeyboardEvent或React合成KeyboardEvent<HTMLElement>**两种类型，导致类型校验失败。React合成事件包含nativeEvent、persist等额外属性，和原生事件类型结构不一致，直接赋值会触发TS错误。

解决方案 #

方案1：兼容两种事件类型 #

修改handleHotKeys的参数类型为联合类型，并在函数内部统一获取原生事件进行操作：

import { KeyboardEvent as ReactKeyboardEvent } from 'react';

// 明确区分React事件和全局原生事件
const handleHotKeys = (event: ReactKeyboardEvent<HTMLTextAreaElement> | globalThis.KeyboardEvent): void => {
  // 统一提取原生事件对象
  const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;
  
  // 后续业务逻辑使用nativeEvent
  // 示例：阻止默认行为
  nativeEvent.preventDefault();
  // 其他代码...
};

方案2：直接使用React合成事件 #

如果你的操作不需要直接使用原生事件，可直接将参数类型指定为React合成事件，getHotkeyHandler会自动适配：

import { KeyboardEvent } from 'react';

const handleHotKeys = (event: KeyboardEvent<HTMLTextAreaElement>): void => {
  // 直接使用React合成事件的API
  event.preventDefault();
  // 如需原生事件，通过event.nativeEvent获取
  const nativeEvent = event.nativeEvent;
  // 其他代码...
};

为什么之前的尝试无效？ #

• 若仅声明React.KeyboardEvent<HTMLTextAreaElement>，未覆盖getHotkeyHandler可能传入的原生KeyboardEvent类型，仍会触发类型不兼容。
• 直接使用KeyboardEvent时，TS会默认指向全局原生事件，和React合成事件的结构差异导致校验失败，需明确区分两种类型（如方案1中用globalThis.KeyboardEvent指定原生事件）。

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