TS 中的“元素”类型不存在属性“X”

Property ‘X’ does not exist on type ‘Element’ in TS

当我们尝试访问 type 的元素上不存在的属性时，会出现错误“Property ‘X’ does not exist on type ‘Element’” Element。要解决该错误，请在访问属性之前使用类型断言正确键入元素。

属性值不存在类型元素

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

索引.html


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

    <a id="link" href="https://google.com" target="_blank">Open Google</a>

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

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

这里有 3 个示例说明错误是如何在index.ts文件中发生的。

源代码/index.ts


const input = document.querySelector('#input');

if (input != null) {
  // ⛔️ Property 'value' does not exist on type 'Element'.ts(2339)
  const value = input.value;
  console.log(value);
}

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

const link = document.querySelector('#link');

if (link != null) {
  // ⛔️ Property 'href' does not exist on type 'Element'.ts(2339)
  const href = link.href;
  console.log(href);
}

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

const btn = document.querySelector('#btn');

if (btn != null) {
  // ⛔️ Property 'disabled' does not exist on type 'Element'.ts(2339)
  btn.disabled = true;
}

我们收到错误的原因是
document.querySelector
方法的返回类型是，而我们尝试访问的属性在该类型Element | null上不存在。Element

要解决该错误，请使用类型断言正确键入元素，例如
HTMLInputElement, HTMLButtonElement, HTMLAnchorElement, HTMLImageElement
,HTMLTextAreaElement等 – 具体取决于您使用的元素类型。

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

源代码/index.ts


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

if (input != null) {
  const value = input.value;
  console.log(value);
}

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

const link = document.querySelector('#link') as HTMLAnchorElement | null;

if (link != null) {
  const href = link.href;
  console.log(href);
}

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

const btn = document.querySelector('#btn') as HTMLButtonElement | null;

if (btn != null) {
  btn.disabled = true;
}

如果您使用了
document.getElementsByClassName
方法，请将集合键入为HTMLCollectionOf<YourElementType>。

源代码/index.ts


// 👇️ with getElementsByClassName
// type as HTMLCollectionOf<HTMLInputElement>
const inputs = document.getElementsByClassName(
  'input',
) as HTMLCollectionOf<HTMLInputElement>;

for (let i = 0; i < inputs.length; i++) {
  const value = inputs[i].value;
  console.log(value);
}

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

We effectively tell TypeScript that the input variable stores anHTMLInputElement or a null value and not to worry about it.

Similarly, we typed the link variable to be an HTMLAnchorElement or null
and the btn variable – HTMLButtonElement or null.

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

We used a simple if statement that serves as a
type guard
to make sure the input variable doesn’t store a null value before accessing
its value property.

src/index.ts


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

// 👉️ input has type HTMLInputElement or null here

if (input != null) {
  // 👉️ input has type HTMLInputElement here
  const value = input.value;
  console.log(value);
}

TypeScript knows that the input variable has a type of HTMLInputElement in the if block and allows us to directly access its value property.

It’s always a best practice to include null in the type assertion because the
querySelector method would return null if no element with the provided
select was found.

Conclusion #

The error “Property ‘X’ does not exist on type ‘Element'” occurs when we try
to access a property that doesn’t exist on an element of type Element. To
solve the error, use a type assertion to type the element correctly before
accessing the property.

–