TypeScript 中如何使用 querySelector()

Python PHP Java Go TypeScript C++ Vba Node.js C语言 MATLAB

TypeScript 中如何使用 querySelector()

作者：迹忆客最近更新：2022/10/24 浏览次数：

要在 TypeScript 中使用 querySelector() 方法：

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

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

index.html

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

    <div class="box">Box 1</div>
    <div class="box">Box 1</div>

    <button data-id="btn">Click</button>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

src/index.ts

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

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

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

const box = document.querySelector('.box') as HTMLDivElement | null;
console.log(box?.innerHTML); // 👉️ Box 1

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

const button = document.querySelector(
  '[data-id="btn"]',
) as HTMLButtonElement | null;

if (button != null) {
  console.log(button.innerText); // 👉️ "Click"
}

querySelector() 方法的返回类型为 Element | null 。如果 DOM 中不存在具有提供的选择器的元素，则该方法返回 null 值。

如果我们必须访问变量上的任何特定于元素的属性，我们必须使用类型断言来正确键入它

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

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

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

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

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

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

src/index.ts

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

// 👉️ 输入的类型为 HTMLInputElement | null 

if (input != null) {
  // 👉️ input 在此处具有 HTMLInputElement 类型
  console.log(input.value); // 👉️ "Initial value"
}

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

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

如果引用等于 null 或 undefined，我们还可以使用可选链接 (?.) 运算符进行短路。

src/index.ts

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

console.log(box?.innerHTML); // 👉️ Box 1

如果引用等于 null 或 undefined，则可选的链接运算符会短路返回 undefined。

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

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

src/index.ts

// 👇️ 常量按钮: Element | null
const button = document.querySelector('[data-id="btn"]');

if (button != null) {
  // ⛔️ 这里不能访问 innerText 
  console.log(button.innerText);
}

由于 Element 类型上不存在 innerText 属性，因此我们不允许访问它。

如果我们不想将变量键入为特定元素，则可以使用更广泛的 HTMLElement 类型。

src/index.ts

// 👇️ 常量按钮: HTMLElement | null
const button = document.querySelector('[data-id="btn"]') as HTMLElement | null;

if (button != null) {
  console.log(button.innerText);
}