如何在 TypeScript 中输入 event.target

在 TypeScript 中输入 event.target

How to type event.target in TypeScript

使用类型断言event.target在 TypeScript 中输入，例如
const target = event.target as HTMLInputElement. 正确键入后，您可以访问target变量的任何特定于元素的属性。

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

索引.html


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

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

这是相关的 TypeScript 代码。

源代码/index.ts


// 👇️ const input: HTMLInputElement | null
const input = document.getElementById('message') as HTMLInputElement | null;

input?.addEventListener('input', function (event) {
  const target = event.target as HTMLInputElement;
  console.log(target.value);
});

我们使用
类型断言
来键入event.target.HTMLInputElement

我们有效地告诉 TypeScripttarget变量存储了一个HTMLInputElement并且不用担心它。

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

一些常用的类型有：HTMLInputElement、HTMLButtonElement、
HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、
HTMLSelectElement等。

如果您不访问任何特定于元素的属性，您还可以使用更通用的HTMLElement类型。

源代码/index.ts


const input = document.getElementById('message') as HTMLInputElement | null;

input?.addEventListener('input', function (event) {
  const target = event.target as HTMLElement;

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

这是必要的，因为EventTarget接口只包含一些属性，如addEventListener,removeEventListener和dispatchEvent。

您还可以使用内联类型断言。

源代码/index.ts


const input = document.getElementById('message') as HTMLInputElement | null;

input?.addEventListener('input', function (event) {
  // 👇️ type assertion inline
  const value = (event.target as HTMLInputElement).value;

  console.log(value);
});

我们有效地告诉 TypeScript 该event.target属性存储了一个
HTMLInputElement并且不用担心它。

如果您有一个文本区域元素，您将使用该HTMLTextAreaElement类型。

源代码/index.ts


const input = document.getElementById('message') as HTMLTextAreaElement | null;

input?.addEventListener('input', function (event) {
  const target = event.target as HTMLTextAreaElement;

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

其他常用类型有：HTMLInputElement, HTMLButtonElement,
HTMLAnchorElement, HTMLImageElement, HTMLDivElement,HTMLSelectElement等。

–