React中useState定义KeyboardEvent类型状态的默认值问题

在React组件中监听document的keydown事件时，尝试用useState存储键盘事件，但设置默认值时遇到了TypeScript类型错误：

原代码如下：

import { useState, useEffect } from "react";
import { render } from "react-dom";

function App() {
  const [keyEvent, setKeyEvent] = useState<KeyboardEvent>()

  function handleDocumentKeyDown(event: any) {
        setKeyEvent(event)
    }

    useEffect(() => {
        // 无法在input上用React的onKeyDown，因为事件不会在input外触发
        document.addEventListener('keydown', handleDocumentKeyDown)

        return () => {
            document.removeEventListener('keydown', handleDocumentKeyDown)
        }
    }, [])

  return (
    <div>
    </div>
  );
}

const rootElement = document.getElementById("root")
render(<App />, rootElement)

尝试设置useState<KeyboardEvent>({})时，抛出错误：

Argument of type '{}' is not assignable to parameter of type 'KeyboardEvent | (() => KeyboardEvent)'.

尝试设置useState<KeyboardEvent>(null)时，抛出错误：

Argument of type 'null' is not assignable to parameter of type 'KeyboardEvent | (() => KeyboardEvent)'.ts(2345)

解决方法 #

TypeScript中KeyboardEvent是严格的接口类型，空对象{}和null都不符合它的定义。我们需要调整状态的类型，允许初始值为undefined或null：

1. 允许初始值为undefined
   将状态类型定义为KeyboardEvent | undefined，useState不传参数时默认值就是undefined，完全符合类型要求：

const [keyEvent, setKeyEvent] = useState<KeyboardEvent | undefined>();

2. 允许初始值为null
   将状态类型定义为KeyboardEvent | null，然后显式传入null作为初始值：

const [keyEvent, setKeyEvent] = useState<KeyboardEvent | null>(null);

另外建议优化事件处理函数的类型，不要用any，直接指定为KeyboardEvent：

function handleDocumentKeyDown(event: KeyboardEvent) {
  setKeyEvent(event);
}

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