TypeScript不兼容React.KeyboardEvent<HTMLInputElement>？该指定何种事件类型？

在React TypeScript应用中使用了以下代码：

useEffect(() => {
    const handleEscKeyPress = (
      event: React.KeyboardEvent<HTMLInputElement> & { isComposing: boolean }
    ) => {
      if (event.isComposing || event.key === 'Escape') {
        onClose();
        return;
      }
    };

    document.addEventListener('keydown', handleEscKeyPress);

    return () => {
      document.removeEventListener('keydown', handleEscKeyPress!);
    };
  }, []);

IDE高亮document.addEventListener('keydown', handleEscKeyPress);并提示如下错误：

const handleEscKeyPress: (event: React.KeyboardEvent<HTMLInputElement> & {
    isComposing: boolean;
}) => void
No overload matches this call.
  Overload 1 of 2, '(type: "keydown", listener: (this: Document, ev: KeyboardEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(event: React.KeyboardEvent<HTMLInputElement> & {    isComposing: boolean;}) => void' is not assignable to parameter of type '(this: Document, ev: KeyboardEvent) => any'.
      Types of parameters 'event' and 'ev' are incompatible.
        Type 'KeyboardEvent' is not assignable to type 'KeyboardEvent<HTMLInputElement> & { isComposing: boolean; }'.
          Type 'KeyboardEvent' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': locale, nativeEvent, isDefaultPrevented, isPropagationStopped, persist
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(event: React.KeyboardEvent<HTMLInputElement> & {    isComposing: boolean;}) => void' is not assignable to type 'EventListenerOrEventListenerObject'.
      Type '(event: React.KeyboardEvent<HTMLInputElement> & {    isComposing: boolean;}) => void' is not assignable to type 'EventListener'.
        Types of parameters 'event' and 'evt' are incompatible.
          Type 'Event' is not assignable to type 'KeyboardEvent<HTMLInputElement> & { isComposing: boolean; }'.
            Type 'Event' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': altKey, charCode, ctrlKey, code, and 15 more.ts(2769)

请问应为event指定何种类型来解决该问题？

问题核心是混用了React封装的合成事件类型和原生DOM事件类型。document.addEventListener接收的是原生DOM事件，而你给handleEscKeyPress的参数指定了React专属的KeyboardEvent<HTMLInputElement>，两种类型并不兼容。

正确的类型应该是原生DOM的KeyboardEvent，且原生KeyboardEvent本身就包含isComposing属性，无需额外声明交叉类型。修改后的代码如下：

useEffect(() => {
    const handleEscKeyPress = (event: KeyboardEvent) => {
      if (event.isComposing || event.key === 'Escape') {
        onClose();
        return;
      }
    };

    document.addEventListener('keydown', handleEscKeyPress);

    return () => {
      document.removeEventListener('keydown', handleEscKeyPress);
    };
  }, [onClose]); // 注意：需将onClose加入依赖数组，避免闭包导致的旧值引用问题

补充说明 #

1. 原生KeyboardEvent自带isComposing属性，不需要额外扩展类型。
2. React合成事件类型仅适用于React组件的事件回调（如onKeyDown={(e) => ...}中的e），不能用于原生DOM事件监听。
3. 务必把onClose添加到useEffect的依赖数组中，否则可能出现因闭包导致的逻辑错误。

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