TypeScript中粘贴事件（paste event）无法正常工作的问题求助

问题代码 #

const pasteFn = (e: ClipboardEvent) => {
    const { clipboardData } = e;
    const text = clipboardData?.getData('text/plain');
    console.log(text);
};

window.addEventListener('paste', pasteFn);

错误信息 #

没有匹配的重载调用。
重载1（共2个）：(type: keyof WindowEventMap, listener: (this: Window, ev: Event | DeviceMotionEvent | DeviceOrientationEvent | GamepadEvent | ... 23 more ... | StorageEvent) => any, options?: boolean | ... 1 more ... | undefined): void，报错：
类型"paste"无法赋值给keyof WindowEventMap类型参数。
重载2（共2个）：(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void，报错：
类型(e: ClipboardEvent) => void无法赋值给EventListenerOrEventListenerObject类型参数。
类型(e: ClipboardEvent) => void无法赋值给EventListener类型。
参数e和evt类型不兼容。
Event类型缺少ClipboardEvent类型必需的clipboardData属性。ts(2769)
lib.dom.d.ts(3747, 14): clipboardData在此处声明。

解决方案 #

1. 类型断言/守卫（最直接）

直接在事件处理函数中处理类型兼容问题，两种方式可选：

类型断言版本：

const pasteFn = (e: Event) => {
  const clipboardEvent = e as ClipboardEvent;
  const text = clipboardEvent.clipboardData?.getData('text/plain');
  console.log(text);
};

window.addEventListener('paste', pasteFn);

类型守卫版本（更安全）：

const pasteFn = (e: Event) => {
  if ('clipboardData' in e) {
    const text = e.clipboardData?.getData('text/plain');
    console.log(text);
  }
};

window.addEventListener('paste', pasteFn);

2. 检查tsconfig的lib配置

如果TypeScript环境缺少DOM相关类型定义，会导致WindowEventMap不包含paste事件。确保tsconfig.json的lib字段包含dom：

{
  "compilerOptions": {
    "lib": ["ESNext", "dom"]
  }
}

3. 使用addEventListener泛型

利用TypeScript泛型特性，明确指定事件类型为ClipboardEvent：

const pasteFn = (e: ClipboardEvent) => {
  const text = e.clipboardData?.getData('text/plain');
  console.log(text);
};

window.addEventListener<ClipboardEvent>('paste', pasteFn);

错误原因 #

本质是TypeScript无法自动推断paste事件对应的ClipboardEvent类型，要么是DOM类型定义不全，要么是类型推断逻辑没覆盖到这个场景。以上三种方案分别从类型兼容、环境配置、显式类型声明三个角度解决问题。

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