TS 中的 HTMLElement 类型不存在属性“select”

Property ‘select’ does not exist on type HTMLElement

当我们尝试在select()类型为
HTMLElement.

HTMLInputElement要解决该错误，请像调用之前一样使用类型断言来键入元素
select。

属性选择不存在类型 htmlelement

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

索引.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <input type="text" id="text-box" size="20" value="Hello world!" />
    <button id="btn">Select text</button>

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

这是index.ts文件中如何发生错误的示例。

源代码/index.ts


// 👇️ const input: HTMLElement | null
const input = document.getElementById('text-box');

const btn = document.getElementById('btn');

btn?.addEventListener('click', () => {
  // ⛔️ Property 'select' does not exist on type 'HTMLElement'. Did you mean 'onselect'?ts(2551)
  input?.select();
});

我们得到错误的原因是
document.getElementById
方法的返回类型是HTMLElement | null，并且

该类型上不存在selectHTMLElement方法。

要解决该错误，请使用类型断言将元素键入为 an
HTMLInputElement（或者HTMLTextAreaElement如果键入文本区域）。

源代码/index.ts


const input = document.getElementById('text-box') as HTMLInputElement | null;

const btn = document.getElementById('btn');

btn?.addEventListener('click', () => {
  input?.select();
});

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

我们有效地告诉 TypeScriptinput变量存储一个HTMLInputElement或一个null值而不用担心它。

We used a
union type
to specify that the variable could still be null, because if an HTML element
with the provided id does not exist in the DOM, the getElementById() method
returns a null value.

We used the
optional chaining (?.)
operator to get around the possibly null value in the example.

src/index.ts


const input = document.getElementById('text-box') as HTMLInputElement | null;

const btn = document.getElementById('btn');

// 👇️ optional chaining (?.)
btn?.addEventListener('click', () => {
  // 👇️ optional chaining (?.)
  input?.select();
});

The optional chaining operator short-circuits returning undefined if the
reference is equal to null or undefined.

In other words, if the input variable stores a null value, we won’t attempt to call the select() method on null and get a runtime error.

Alternatively, you can use a simple if statement that serves as a
type guard.

src/index.ts


const input = document.getElementById('text-box') as HTMLInputElement | null;

const btn = document.getElementById('btn');

if (btn != null) {
  btn.addEventListener('click', () => {
    // 👉️ input has type HTMLInputElement or null here
    if (input != null) {
      // 👉️ input has type HTMLInputElement here
      input.select();
    }
  });
}

We explicitly check that the input variable does not store a null value.

TypeScript knows that the input variable has a type of HTMLInputElement in
the if block and allows us to directly call the select() method.

Which approach you pick to exclude null from the type before calling the
select() method is a matter of personal preference.

However, it’s always a best practice to include null in the type assertion,
because the getElementById method would return null if no element with the
provided id was found.

Conclusion #

The error “Property ‘select’ does not exist on type ‘HTMLElement'” occurs when
we try to call the select() method on an element that has a type of
HTMLElement.

HTMLInputElement要解决该错误，请像调用之前一样使用类型断言来键入元素
select。

–