使用 TypeScript 获取输入元素的值

Get the value of an input element using TypeScript

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

选择输入元素。
HTMLInputElement使用类型断言键入输入元素。
使用value属性获取元素的值。

这是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;

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如果您正在键入文本区域元素）。

我们有效地告诉 TypeScriptinput变量存储一个HTMLInputElement或一个null值而不用担心它。

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

在第一个示例中，我们使用
可选链接 (?.)null运算符在引用为空值（或）
时进行短路undefined。

源代码/index.ts


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

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

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

In other words, if the input variable stores a null value, we won’t attempt
to access the value property on a null value and get a runtime error.

Alternatively, you can use a simple if statement that serves as a
type guard.

src/index.ts


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

if (input != null) {
  // 👉️ input has type HTMLInputElement here
  console.log(input.value); // 👉️ "Initial value"
}

TypeScript knows that the input variable has a type of HTMLInputElement in the if block and allows us to directly access its value property.

It’s always a best practice to include null in the type assertion, because the
getElementById method would return null if no element with the provided id
was found.

If you need to access the value property of an input element in an event
handler, type the event target as an HTMLInputElement.

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

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

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

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

–