React Hook监听ESC按键时TypeScript类型不兼容问题

你的类型错误根源是混用了React封装的事件类型和原生DOM事件类型：

• 你给listener参数标注的KeyboardEvent<Element>是React对原生事件的包装类型，自带locale、nativeEvent等React专属属性；
• 但document.addEventListener接收的是原生DOM的KeyboardEvent，和React包装的类型不兼容，所以TypeScript报错。

修复方案 #

直接把listener的事件类型改成原生的KeyboardEvent即可，不需要带泛型：

export function useEscapeKeyPress(action: () => void): void {
    const listener = useCallback(
        (event: KeyboardEvent): void => {
            if (event.key === 'Escape') {
                action()
            }
        },
        [action]
    )

    useLayoutEffect(() => {
        document.addEventListener('keyup', listener, false)

        return () => {
            document.removeEventListener('keyup', listener, false)
        }
    }, [listener])
}

补充说明 #

• 之所以用//@ts-ignore后逻辑能正常运行，是因为React封装的事件对象在运行时底层还是原生事件，所以代码能执行，但TypeScript的类型检查会严格区分两种类型，因此必须修正类型标注才能消除错误。
• 只有在React组件的事件回调（比如onKeyUp）中，才需要使用KeyboardEvent<Element>这类React封装的事件类型；直接操作DOM元素（比如document）添加监听时，必须用原生DOM事件类型。

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