TS 错误：类型 'event' 缺少类型 'keyboardevent' 中的以下属性

Question

我有一个自定义事件侦听器挂钩，如下所示：

const useEventListener = (
eventName: string,
handler: ({key} : KeyboardEvent) => void,
) => {
const savedHandler = useRef<({key} : KeyboardEvent) => void>(handler)
useEffect(() => {
savedHandler.current = handler
}, [handler])
useEffect(() => {
const eventListener = (event: KeyboardEvent) => savedHandler.current(event)
window.addEventListener(eventName, eventListener);
return () => {
window.removeEventListener(eventName, eventListener)
}
}, [eventName])
}

这是抛出错误，

TS error: Type 'event' is missing the following properties from type 'keyboardevent': char, key and 18 others

我是不是打错了useRef？我在这里也找不到任何有用的东西。不确定我在这里做错了什么。

Answer 1

没关系。

工作解决方案将是

const useEventListener = (
eventName: 'keydown' | 'keyup',
handler: ({key} : KeyboardEvent) => void,
) => {
const savedHandler = useRef<({key} : KeyboardEvent) => void>(handler)

useEffect(() => {
savedHandler.current = handler
}, [handler])

useEffect(() => {
const eventListener = (event: KeyboardEvent) => savedHandler.current(event)

window.addEventListener(eventName, eventListener);

return () => {
window.removeEventListener(eventName, eventListener)
}
}, [eventName])
}

问题是eventName: string,

TS发现您允许侦听任何事件(无论是否为键盘(，因此它不能保证发出的事件将是仅键盘类型。因此，您需要向TS保证，您将只监听键盘事件。这可以通过为eventName提供正确的类型来实现，eventName应该是键盘事件名称的子集。

就是这样。