SvelteKit+TypeScript中addEventListener传入async函数的ESLint错误解决

问题核心是addEventListener要求回调函数返回void，但你声明的async函数会返回Promise，这触发了ESLint的类型检查错误。以下是几种实用的解决方式：

1. 用立即执行异步函数包裹异步逻辑 #

把handleKeyPress改成普通函数，内部用立即执行的异步函数处理await操作，确保回调本身返回void，完全符合API要求：

function handleKeyPress(event: KeyboardEvent) {
  if (mainList.length > 0) {
    const press = event.key === 'ArrowLeft' ? 'left' : event.key === 'ArrowRight' ? 'right' : null;
    
    if (press) {
      // 用IIFE包裹异步逻辑，避免回调返回Promise
      (async () => {
        await moveItem(press);
      })();
    }
  }
}

额外提示：别忘了处理异步操作可能出现的错误，避免未捕获的Promise拒绝：

function handleKeyPress(event: KeyboardEvent) {
  if (mainList.length > 0) {
    const press = event.key === 'ArrowLeft' ? 'left' : event.key === 'ArrowRight' ? 'right' : null;
    
    if (press) {
      (async () => {
        try {
          await moveItem(press);
        } catch (error) {
          console.error('移动项目失败:', error);
          // 这里可以添加UI层面的错误提示，比如弹出通知
        }
      })();
    }
  }
}

2. 临时禁用ESLint规则（不推荐） #

如果只是想快速绕过错误，可以在事件监听的代码行上方添加ESLint忽略注释，但这只是权宜之计，可能掩盖其他潜在的Promise误用问题：

onMount(() => {
  // eslint-disable-next-line @typescript-eslint/no-misused-promises
  document.addEventListener('keyup', handleKeyPress);
});

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