Vue+Typescript开发报错：HTMLInputElement类型上不存在target属性

报错根因 #

你给boxCheck方法的$event参数标注的类型是HTMLInputElement，但键盘事件触发时传入的参数是事件对象，HTMLInputElement是DOM元素本身的类型，不存在target属性，因此触发类型报错。

解决方案 #

方案1：修正事件对象类型并做类型断言 #

调整boxCheck方法的参数类型为键盘事件类型KeyboardEvent，再将target断言为HTMLInputElement即可：

boxCheck($event: KeyboardEvent) {
  // 将事件目标断言为输入框元素类型
  const inputEl = $event.target as HTMLInputElement
  // 原有逻辑的if判断会导致未勾选状态下按回车无响应，按需保留即可
  inputEl.checked = !inputEl.checked
  this.$emit('change', inputEl.checked)
}

如果模板中@change的写法也出现同类类型报错，调整模板代码为：

<input
  @change="($event) => $emit('change', ($event.target as HTMLInputElement).checked)"
  @keyup.enter="boxCheck($event)"
  :checked="checked"
  ref="test-input"
  type="checkbox"
/>

方案2：通过已有ref直接操作元素（更简洁） #

你已经给输入框绑定了ref="test-input"，可以直接通过ref获取元素实例，不需要传递事件对象：
模板修改为：

<input
  @change="($event) => $emit('change', ($event.target as HTMLInputElement).checked)"
  @keyup.enter="boxCheck"
  :checked="checked"
  ref="test-input"
  type="checkbox"
/>

方法修改为：

boxCheck() {
  const inputEl = this.$refs['test-input'] as HTMLInputElement
  inputEl.checked = !inputEl.checked
  this.$emit('change', inputEl.checked)
}

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