TS 中的 HTMLElement 类型不存在属性“select”
Property ‘select’ does not exist on type HTMLElement
当我们尝试在select()
类型为
HTMLElement
.
HTMLInputElement
要解决该错误,请像调用 之前一样使用类型断言来键入元素
select
。
这是index.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
文件中如何发生错误的示例。
// 👇️ 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
如果键入文本区域)。
const input = document.getElementById('text-box') as HTMLInputElement | null; const btn = document.getElementById('btn'); btn?.addEventListener('click', () => { input?.select(); });
当我们有关于 TypeScript 不知道的值类型的信息时,使用类型断言。
input
变量存储一个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.
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
.
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.
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
。