I have a custom event listener hook that looks like this:

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])
}

This is throwing the error,

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

Am I typing the useRef incorrectly? I wasn't able to find anything from here that work either. Not sure what I'm doing wrong here.

I have a custom event listener hook that looks like this:

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])
}

This is throwing the error,

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

Am I typing the useRef incorrectly? I wasn't able to find anything from here that work either. Not sure what I'm doing wrong here.

• javascript
• reactjs
• typescript
• react-hooks

• 1 your eventListener expects a KeyboardEvent but you are using it with the addEventListener signature that takes a string for the event name, and a listener typed (e: Event) => void. There's no guarantee that it will provide you with a KeyboardEvent and that is what your listener requires. – Aluan Haddad Commented Jul 16, 2020 at 7:16
• I think eventName shouldn't be any string, this should be a specific listener string... – Dennis Vash Commented Jul 16, 2020 at 7:17

1 Answer 1

It's OK.

Working solutions will be

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])
  }

The issue was eventName: string,

TS sees that you are allowing to listen for any event (keyboard or not) so it can't guarantee that the emitted event will be only keyboard type. So you need to assure TS that you will listen only for keyboard events. This can be done by providing the correct type for the eventName which should be a subset of the keyboard event names.

That's it.