TypeScript 中如何使用 document.getElementById()

要在 TypeScript 中使用 document.getElementById() 方法:

  1. 使用类型断言正确键入所选元素。
  2. 使用类型保护来确保变量不存储空值。
  3. 访问任何特定于元素的属性。

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

index.html

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8" />

</head>

<body>

<inputid="message"type="text"name="message"value="Initial Value" />

<divid="box">hello 迹忆客</div>

<buttonid="btn">Submit</button>

<scriptsrc="./src/index.ts"></script>

</body>

</html>

下面是相关的 TypeScript 代码。

index.ts

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

if (input != null) {

console.log(input.value); // ????️ "Initial Value"

}

// ---------------------------------

const box = document.getElementById('box') as HTMLDivElement | null;

console.log(box?.innerHTML); // ????️ "hello world"

// ---------------------------------

const button = document.getElementById('btn') as HTMLButtonElement | null;

if (button != null) {

console.log(button.innerText); // ????️ "Submit"

}

document.getElementById 方法的返回类型为 HTMLElement | null 。 如果 DOM 中不存在具有提供的 id 的元素,则该方法返回 null 值。

如果我们必须访问变量上的任何特定于元素的属性,我们必须使用类型断言。

当我们有关于 TypeScript 无法知道的值的类型的信息时,使用类型断言。

我们有效地告诉 TypeScript 输入变量存储了一个 HTMLInputElement 或一个null,不用担心它。

在第一个示例中,我们将输入变量输入为 HTMLInputElement | null

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

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

我们使用一个简单的 if 语句作为类型保护,以确保输入变量在访问其属性之前不存储空值。

index.ts

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

// 这里输入的类型为 HTMLInputElement 或 null

if (input != null) {

// ????️ input has type HTMLInputElement here

console.log(input.value); // ????️ "Initial Value"

}

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

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

如果引用等于 null 或 undefined ,我们还可以使用可选链 (?.) 运算符进行阻断。

index.ts

const box = document.getElementById('box') as HTMLDivElement | null;

console.log(box?.innerHTML); // "hello 迹忆客"

如果引用等于 null 或 undefined,则可选的链运算符会阻断运行并返回 undefined。

换句话说,如果 box 变量存储了一个 null 值,我们就不会尝试访问 null 上的 innerHTML 属性并获得运行时错误。

如果我们不使用 document.getElementById 方法的类型断言,则变量的类型将是 HTMLElement | null。

index.ts

// 常量 input: HTMLElement | null

const input = document.getElementById('message');

if (input != null) {

// ⛔️ 这里无法访问value

console.log(input.value); // ????️ "Initial Value"

}

由于 HTMLElement 类型上不存在 value 属性,因此我们不能访问它。

当我们不必访问任何特定于元素的属性时,这种方法就足够了。

本文转载自:迹忆客(https://www.jiyik.com)

以上是 TypeScript 中如何使用 document.getElementById() 的全部内容, 来源链接: utcz.com/z/290323.html

回到顶部