Angular 9下TypeScript报EventTarget无checked属性的解决方法

TypeScript内置的DOM类型定义里，通用Event类型的target属性默认是最宽泛的EventTarget接口——这个接口只规定了所有DOM元素都具备的基础能力，比如添加、移除事件监听的通用方法，不包含单类元素的专属属性。而checked是复选框（<input type="checkbox">）独有的属性，归属于HTMLInputElement的类型定义范围，因此直接读取event.target.checked自然会触发“属性不存在”的类型检查报错。

以下两种实现均适配Angular 9的开发场景，能完全通过严格的TypeScript类型校验：

方案1：在事件处理方法内做明确类型断言 #

我们在代码开发时很清楚当前的change事件是绑定在复选框元素上的，可以直接将事件目标收窄为对应的具体元素类型，属于安全的类型收窄，没有跳过类型检查：

public CheckBoxChange(event: Event) { 
  // 将事件目标明确断言为复选框对应的HTMLInputElement类型
  const checkboxInput = event.target as HTMLInputElement;
  this.service.change(this.d!.id.toString(), checkboxInput.checked)
    .subscribe(res => {
      console.log(res)
    }, err => {
      console.log(err)
    })
}

方案2：贴合Angular开发习惯，传递明确类型的参数 #

这种方式从根源上规避了原生Event类型的模糊问题，是Angular项目中更常用的写法：

• 模板中给复选框添加模板引用变量，绑定事件时直接传入元素的checked值：

  <input type="checkbox" (change)="CheckBoxChange(checkboxRef.checked)" #checkboxRef>
  

• 对应的组件方法不再接收原生Event对象，直接定义布尔类型的入参，类型完全明确：

  public CheckBoxChange(checked: boolean) { 
    this.service.change(this.d!.id.toString(), checked)
      .subscribe(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
  }
  

注意：两种方案都没有绕过TypeScript的类型校验。第一种是基于已知DOM结构的安全类型收窄，第二种是从模板绑定环节就传入了明确类型的值，全程没有使用any跳过检查。

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