TypeScript Property ‘checked’ 在 ‘EventTarget’ 类型上不存在.ts(2339) Angular

在本文中，我们将介绍 TypeScript 中的一个常见错误，即 Property ‘checked’ 在 ‘EventTarget’ 类型上不存在。我们将首先解释产生这个错误的原因，然后给出相应的解决方案和示例说明。

问题描述

在 Angular 项目中，有时我们会遇到一个类型错误，即 Property ‘checked’ 在 ‘EventTarget’ 类型上不存在。这个错误通常发生在我们想要获取 HTML 元素的状态时，比如复选框的选中状态。下面是一个例子：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  template: `
    <input type="checkbox" (change)="handleChange($event)">
  `
})
export class CheckboxComponent implements OnInit {
  handleChange(event: Event): void {
    console.log(event.target.checked); // 报错：Property 'checked' does not exist on type 'EventTarget'.ts(2339)
  }
}

在上面的例子中，我们创建了一个复选框组件，并在模板中添加了一个复选框元素。当复选框的选中状态发生改变时，我们调用 handleChange 方法来处理事件。然而，当我们尝试在 handleChange 方法中获取复选框的选中状态时，TypeScript 报错，提示 Property ‘checked’ 在 ‘EventTarget’ 类型上不存在。

解决方案

产生这个类型错误的原因是 TypeScript 中的类型检查机制。在事件处理函数中，event 参数的类型被推断为 Event。而 Event 类型的 target 属性的类型为 EventTarget，而不是我们期望的 HTML 元素类型。

为了解决这个错误，我们需要将 event 参数的类型指定为我们期望的 HTML 元素类型。一种常用的方式是使用类型断言，将 event 参数的类型断言为所需的 HTML 元素类型。修改上面的代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkbox',
  template: `
    <input type="checkbox" (change)="handleChange($event)">
  `
})
export class CheckboxComponent implements OnInit {
  handleChange(event: Event): void {
    console.log((event.target as HTMLInputElement).checked);
  }
}

在上面的例子中，我们使用了类型断言 (event.target as HTMLInputElement) 将 event.target 的类型断言为 HTMLInputElement，即我们期望的复选框元素类型。通过这种方式，我们可以正常访问复选框的 checked 属性，而不再报错。

此外，还有其他一些解决方案可以避免这个类型错误，比如使用可选链操作符（Optional Chaining Operator）或非空断言操作符（Non-null Assertion Operator）。具体可根据项目需求和开发团队的规范选择合适的解决方案。

示例说明

为了更好地说明这个问题和解决方案，让我们再来看一个示例。假设我们有一个表单组件，其中包含一组复选框，用户可以选择多个选项。我们需要在用户进行选择时，实时显示用户已选择的选项。下面是示例代码：

import { Component, OnInit } from '@angular/core';

interface Option {
  id: number;
  label: string;
  checked: boolean;
}

@Component({
  selector: 'app-checkbox-list',
  template: `
    <h3>选择选项：</h3>
    <div *ngFor="let option of options">
      <input type="checkbox" [checked]="option.checked" (change)="handleChange(option, $event)">
      <label>{{ option.label }}</label>
    </div>

    <h3>已选择的选项：</h3>
    <ul>
      <li *ngFor="let option of selectedOptions">{{ option.label }}</li>
    </ul>
  `
})
export class CheckboxListComponent implements OnInit {
  options: Option[] = [
    { id: 1, label: '选项1', checked: false },
    { id: 2, label: '选项2', checked: false },
    { id: 3, label: '选项3', checked: false }
  ];
  selectedOptions: Option[] = [];

  handleChange(option: Option, event: Event): void {
    option.checked = (event.target as HTMLInputElement).checked;

    if (option.checked) {
      this.selectedOptions.push(option);
    } else {
      const index = this.selectedOptions.findIndex(o => o.id === option.id);
      if (index !== -1) {
        this.selectedOptions.splice(index, 1);
      }
    }
  }
}

在上面的示例中，我们通过 *ngFor 指令循环渲染了一组复选框，并使用了数据绑定来实现选中状态的同步。当用户选择或取消选择一个选项时，我们调用 handleChange 方法来更新选项的选中状态，并根据选中状态来实时更新已选择的选项列表。

在 handleChange 方法中，我们首先使用类型断言 (event.target as HTMLInputElement) 将 event.target 的类型断言为 HTMLInputElement，以便访问复选框的 checked 属性。然后，根据选中状态的改变更新选项和已选择的选项列表。

通过这个示例，我们可以清楚地看到如何使用类型断言来解决 Property ‘checked’ 在 ‘EventTarget’ 类型上不存在的问题，并成功处理复杂的业务逻辑。