Passing a promise to addEventListener() in TypeScript?

Question

On a sveltekit app, I am trying to create an event listener that executes an async function (a mutation) using Typescript.

onMount(() => {
  document.addEventListener('keyup', handleKeyPress);
});

The argument I pass to the addEventListener is an async function defined as...

async function handleKeyPress(event: KeyboardEvent) {
  if (mainList.length > 0) {
    const press =
      event.key === 'ArrowLeft' ? 'left' : event.key === 'ArrowRight' ? 'right' : null;
    
      if (press) {
        await moveItem(press);
      }
  }
}

You see, addEventListener expects a function that returns void, so I am getting this error:

Promise returned in function argument where a void return was expected. eslint

Anyway to solve this error?

Answer 1

You should not be doing this anyway; you are leaking an event listener if you don't remove it on destroy.

There are special elements for adding listeners to the document or window.

<svelte:document on:keyup={handleKeyPress} />