TypeScript中Click与Keydown事件共用回调时的类型错误解决方案咨询

嘿，这个TypeScript类型报错我之前也碰到过，其实核心原因就是回调函数的参数类型没有明确好，让我给你拆解几种靠谱的解决方法：

方法一：给回调参数添加联合类型（最推荐） #

直接把callback的参数类型声明为Event | KeyboardEvent，明确告诉TypeScript这个参数可能是两种类型中的一种，再配合你已经写的'key' in e类型守卫，TS就能正确识别代码块里e的类型了：

const onClick = (e: Event) => { callback(e); };
const onKeydown = (e: KeyboardEvent) => { callback(e); };
const callback = (e: Event | KeyboardEvent) => {
  if ('key' in e && e.key === 'Enter') console.log('yeet');
}

这种方式最安全，完全符合TypeScript的类型检查逻辑，不会有潜在的运行时风险。

方法二：使用类型断言（谨慎使用） #

如果你非常确定在'key' in e的判断分支里，e一定是KeyboardEvent，也可以用类型断言来手动告诉TS这个类型：

const onClick = (e: Event) => { callback(e); };
const onKeydown = (e: KeyboardEvent) => { callback(e); };
const callback = (e: Event) => {
  if ('key' in e && (e as KeyboardEvent).key === 'Enter') console.log('yeet');
}

不过要注意：类型断言是你强制TS接受你的类型判断，如果后续代码逻辑变动导致这个判断不成立，很可能会引发运行时错误，所以除非你对场景有绝对把握，否则优先选第一种方法。

额外小建议 #

• 尽量避免隐式的any类型（你原来的代码里callback的e没有声明类型，TS会自动推断，但因为两个调用方传入的类型不一致，最终推断为最宽泛的Event，才导致了报错）
• TypeScript的类型守卫（比如'key' in e、instanceof等）是处理联合类型的利器，善用它们能让你的类型检查更精准。

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