如何在 TypeScript 中输入 event.target

TypeScript 2年前 50

使用类型断言在 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 应该能够帮助你自动完成。

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

如果我们不访问任何特定于元素的属性，我们还可以使用更通用的 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 接口只包含几个属性，如 addEventListener、removeEventListener 和 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);
});