TypeScript 中如何使用 document.getElementById()

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

TypeScript 中如何使用 document.getElementById()

作者：迹忆客最近更新：2023/01/08 浏览次数：

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

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

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input id="message" type="text" name="message" value="Initial Value" />

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

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

    <script src="./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"
}