迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 >

TypeScript 错误 Property 'X' does not exist on type 'EventTarget'

作者:迹忆客 最近更新:2022/06/19 浏览次数:

当我们尝试访问具有 EventTarget 类型的元素上的属性时,会出现错误“Property 'X' does not exist on type 'EventTarget'”。 要解决此错误,需要在访问属性之前使用类型断言正确输入元素。

TypeScript Property 'X' does not exist on type 'EventTarget'

这是本文中示例的 index.html 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input id="message" type="text" name="message" value="Initial Value" />

    <button id="btn">Log files</button>

    <script src="./src/index.ts"></script>
  </body>
</html>

以下是 index.ts 文件中如何发生错误的 2 个示例。

const input = document.getElementById('message');

input?.addEventListener('input', event => {
  console.log(event.target?.value);
});

// ----------------------

const btn = document.getElementById('btn');

btn?.addEventListener('click', event => {
  event.target?.click();

  console.log('button clicked');
});

我们在第一个示例中得到错误的原因是 EventTarget 接口不包含 value 属性。

要解决该错误,需要使用类型断言将元素键入为 HTMLInputElement(或 HTMLTextAreaElement,如果我们使用的是 textarea 元素)。

同样,在第二个示例中,EventTarget 接口上不存在 click() 方法,因此我们必须将元素键入为 HTMLButtonElement

const input = document.getElementById('message');

input?.addEventListener('input', event => {
  // 👇️ 使用类型断言
  const target = event.target as HTMLInputElement;

  console.log(target.value);
});

// ----------------------

const btn = document.getElementById('btn');

btn?.addEventListener('click', event => {
  // 👇️ use type assertion
  const target = event.target as HTMLButtonElement;

  target.click();

  console.log('button clicked');
});

我们将 event.target 属性分配给目标变量并将其键入为 HTMLInputElement,以便我们可以访问它的 value 属性。

这些类型一致地命名为 HTML***Element。 一旦我们开始输入 HTML.., IDE 应该能够帮助我们自动完成。

一些常用的类型有:HTMLInputElementHTMLButtonElementHTMLSelectElementHTMLAnchorElementHTMLImageElementHTMLTextAreaElement 等。

当我们有关于 TypeScript 无法知道的值的类型的信息时,使用类型断言。

我们有效地告诉 TypeScript 目标变量存储一个 HTMLInputElement 而不必担心它。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便