TypeScript 中如何使用 document.getElementById()

Z时代
2024-01-10
分类：综合

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

使用类型断言正确键入所选元素。

使用类型保护来确保变量不存储空值。

访问任何特定于元素的属性。

这是本文中示例的 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"
}