TypeScript 中如何使用 querySelector()

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

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

下面是本文中示例的 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 应该能够帮助你自动完成。

一些常用的类型有:HTMLInputElementHTMLButtonElementHTMLAnchorElementHTMLImageElementHTMLTextAreaElementHTMLSelectElement等。

我们使用了一个简单的 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);
}

HTMLElement 类型比 Element 类型有更多的属性。 例如,HTMLElement 接口公开了诸如 innerTextstyle 等属性。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » TypeScript 中如何使用 querySelector()