如何在 TypeScript 中输入 event.target

使用类型断言在 TypeScript 中键入 event.target,例如 const target = event.target 作为 HTMLInputElement。 一旦输入正确,我们就可以访问目标变量上的任何特定于元素的属性。

这是本文中示例的 index.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 代码。

// 👇️ 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

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

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

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

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

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

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

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

这是必要的,因为 EventTarget 接口只包含几个属性,如 addEventListenerremoveEventListener 和 dispatchEvent

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

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,不用担心它。

如果你有一个 textarea 元素,你会使用 HTMLTextAreaElement 类型。

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

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

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

其他常用的类型有:HTMLInputElementHTMLButtonElementHTMLAnchorElementHTMLImageElementHTMLDivElementHTMLSelectElement等。