如何正确赋值KeyboardEvent？解决类型不兼容报错

问题原因 #

Vue的@keydown事件触发时，传入的事件对象类型可能是Event或KeyboardEvent，而你的函数参数直接指定了KeyboardEvent，TypeScript会因为类型不匹配抛出报错。

解决方法 #

方法1：类型断言 #

在调用函数时，直接把事件对象断言为KeyboardEvent：

@keydown="(event) => handleInputFocus(index, event as KeyboardEvent)"

或者在函数内部做断言：

const handleInputFocus = (id: number, e: Event | KeyboardEvent) => {
  const keyboardEvent = e as KeyboardEvent;
  // 后续可安全使用keyboardEvent的属性，比如keyboardEvent.ctrlKey、keyboardEvent.code等
};

方法2：类型守卫 #

在函数内部通过类型判断缩小类型范围，让TypeScript自动识别事件类型：

const handleInputFocus = (id: number, e: Event | KeyboardEvent) => {
  if (e instanceof KeyboardEvent) {
    // 此处e的类型会被推断为KeyboardEvent，可直接使用altKey、charCode等属性
    console.log(e.code);
  }
};

方法3：调整函数参数类型 #

如果不需要严格限制类型，可以直接把函数参数类型改为Event | KeyboardEvent，再根据业务逻辑内部处理：

const handleInputFocus = (id: number, e: Event | KeyboardEvent) => {
  // 按需处理不同类型的事件对象
};

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