TypeScript 如何修复EventTarget上不存在的属性

TypeScript是一种开源语言，为JavaScript提供了可选的静态类型。它允许开发者通过在编译时捕获与类型相关的错误来编写更易于维护的代码，而不是在运行时。然而，在TypeScript中使用事件监听器可能会有些棘手。一个常见的问题是“EventTarget上不存在的属性”错误。当您尝试访问TypeScript无法识别的事件目标上的属性时，就会出现此错误。

在本文中，我们将讨论如何修复此错误，并通过示例演示如何在TypeScript中使用事件监听器。

了解错误

在我们解决方案之前，了解为什么会出现此错误是很重要的。在TypeScript中， EventTarget 接口表示任何可以接收事件的对象，比如窗口或HTML元素。然而，并非所有属性和方法都在EventTarget接口上定义。例如，假设您正在尝试在事件监听器中访问HTML输入元素的“value”属性。那么当EventTarget接口没有定义“value”属性时，TypeScript可能会抛出“EventTarget上不存在的属性”错误。

要修复此错误，您需要告诉TypeScript事件目标是一个HTML元素，并提供该元素的正确接口定义。让我们通过一些示例来看看如何做到这一点。

示例1：访问输入元素的值属性

创建一个包含输入字段的表单的HTML文件，如下所示 –

index.html

<html lang="en">
<head>
   <script src = "test.js"> </script>
</head>
<body>
   <form action = "">
      <input type = "text">
   </form>
</body>
</html>

为了在用户提交表单时捕获输入字段的值，可能会像这样编写一个事件监听器：

const form = document.querySelector('form');
form!.addEventListener('submit', (event) => {
   event.preventDefault();
   const inputValue = event!.target!.value;
   console.log(inputValue);
});

然而，TypeScript可能会抛出” 在EventTarget上不存在的属性 “错误，因为在EventTarget接口中没有定义”value”属性。

要修复这个错误，你需要告诉TypeScript事件目标是一个 HTMLInputElement 。你可以通过使用类型断言来实现，像这样−

test.ts

const form = document.querySelector('form');
form!.addEventListener('submit', (event) => {
   event.preventDefault();
   const inputValue = (event!.target as HTMLInputElement)!.value;
   console.log(inputValue);
});

在这个例子中，我们使用 “as” 关键字告诉TypeScript事件目标是一个 HTMLInputElement 。现在，TypeScript知道 “value” 属性存在于 EventTarget 上，并且不会抛出错误。

输出

TypeScript 如何修复EventTarget上不存在的属性

示例2：使用自定义事件

假设你想定义一个自定义事件，并从元素中触发该事件。你可能会编写如下代码：

const element = document.querySelector('#my-element');
// Define a custom event
const myEvent = new CustomEvent('my-event', {
   detail: {
      message: 'Hello, world!'
   }
});

// Dispatch the event
element.dispatchEvent(myEvent);

// Handle the event
element!.addEventListener('my-event', (event) => {
   const message = (event as CustomEvent).detail.message;
   console.log(message);
});

然而，在事件监听器中尝试访问事件的“detail”属性时，TypeScript可能会抛出“在EventTarget上不存在的属性”错误，因为“detail”属性在EventTarget接口中未定义。

要解决此错误，您需要告诉TypeScript事件目标是一个CustomEvent。您可以通过使用另一种类型的断言来做到这一点，就像这样−

const element = document.querySelector('#my-element');

// Define a custom event
const myEvent = new CustomEvent('my-event', {
   detail: {
      message: 'Hello, world!'
   }
});

// Dispatch the event
element!.dispatchEvent(myEvent);

// Handle the event
element!.addEventListener('my-event', (event) => {
   const message = (event as CustomEvent).detail.message;
   console.log(message);
});

在这个例子中，我们使用类型断言告诉 TypeScript 事件是 CustomEvent 类型。现在，TypeScript 知道事件上存在 detail 属性，并且不会抛出错误。

输出

TypeScript 如何修复EventTarget上不存在的属性

示例3：使用多种类型的事件监听器

假设您想在元素上监听多种类型的事件，例如 “click” 和 “keydown”。您可以编写如下代码：

const element = document.querySelector("#my-element");

// Handle click events
element!.addEventListener("click", (event) => {
   console.log("Clicked!");
   console.log(`Clicked at ( ${MouseEvent.clientX},$ {MouseEvent.clientY})`);
});

// Handle keydown events
element!.addEventListener("keydown", (event) => {
   console.log("Keydown!");
   console.log(`Key pressed: ${KeyboardEvent.code}`);
});

然而，当你尝试访问事件上的属性时，例如在”keydown”事件上访问”keyCode”属性，TypeScript可能会抛出”在EventTarget上不存在的属性”的错误，因为EventTarget接口没有定义这些属性。

要解决这个错误，你需要告诉TypeScript事件是特定类型的事件，比如MouseEvent或KeyboardEvent。

你可以通过在每个事件监听器中使用类型断言来做到这一点，例如：

const element = document.querySelector('#my-element');

// Handle click events
element.addEventListener('click', (event) => {
   const mouseEvent = event as MouseEvent;
   console.log(`Clicked at ( ${mouseEvent.clientX},$ {mouseEvent.clientY})`);
});

// Handle keydown events
element.addEventListener('keydown', (event) => {
   const keyboardEvent = event as KeyboardEvent;
   console.log(`Key pressed: ${keyboardEvent.code}`);
});

在这个例子中，我们使用类型断言来告诉 TypeScript 事件是一个 MouseEvent 还是一个 KeyboardEvent ，具体取决于事件的类型。通过这样做，TypeScript 可以识别事件上的属性和方法，而不会抛出“在 EventTarget 上不存在的属性”错误。