教程 > TypeScript 教程 > TypeScript 扩展知识 阅读：919

使用 TypeScript 获取 input 元素的值

要在 TypeScript 中获取输入元素的值：

  1. 选择 input 元素。
  2. 使用类型断言将 input 元素键入为 HTMLInputElement。
  3. 使用 value 属性获取元素的值。

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

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

const value = input?.value;
console.log(value) // "Initial value"

if (input != null) {
  console.log(input.value); // "Initial value"
}

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

document.getElementById 方法的返回类型是 HTMLElement | null 并且 value 属性在 HTMLElement 类型中不存在。

这就是为什么我们使用类型断言将元素键入为 HTMLInputElement（或 HTMLTextAreaElement，如果你正在键入 textarea 元素）。

我们有效地告诉 TypeScript input 变量存储了一个 HTMLInputElement 或一个空值，不用担心它。

我们使用联合类型来指定变量仍然可以为 null，因为如果 DOM 中不存在具有提供的 id 的 HTML 元素，getElementById() 方法将返回 null 值。

在第一个示例中，如果引用为空（空或未定义），我们使用可选链接 (?.) 运算符进行短路。

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

// optional chaining (?.)
const value = input?.value;
console.log(value); // "Initial value"

如果引用为空，则可选链接 (?.) 运算符会短路返回 undefined。

换句话说，如果 input 变量存储了一个空值，我们将不会尝试访问空值的 value 属性并获得运行时错误。

或者，我们可以使用一个简单的 if 语句作为类型保护。

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

if (input != null) {
  // input 这里的类型为 HTMLInputElement
  console.log(input.value); // "Initial value"
}

TypeScript 知道 input 变量在 if 块中有一种 HTMLInputElement 类型，并允许我们直接访问它的 value 属性。

在类型断言中包含 null 始终是最佳的方式，因为如果没有找到具有提供的 id 的元素，getElementById 方法将返回 null。

如果我们需要在事件处理程序中访问输入元素的 value 属性，请将事件目标键入为 HTMLInputElement。

// 常量 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);
});

EventTarget 接口不包含 value 属性，因此我们将 target 属性键入为 HTMLInputElement。

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

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

查看笔记

扫码一下
查看教程更方便