TS2339：“元素”类型上不存在属性“样式”

Question

这是代码：

 const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
    element.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>'; // Please note that this line works fine!
    element.style.padding = '10px';
    element.style.borderTop = '0';
});

编译时出现的错误：

src/app/ / .component.ts(101,21) 中的错误：错误 TS2339：“元素”类型上不存在属性“样式”。 src/app/ / .component.ts(102,21)：错误 TS2339：“元素”类型上不存在属性“样式”。

我该如何解决？

I tried to remove the Array.from... part, tried to use for of and for in , tried as any , but above is the way I have to做。

原文由 AmazingDayToday 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要一个类型转换：

 Array.from(document.getElementsByClassName('mat-form-field-infix') as HTMLCollectionOf<HTMLElement>)

那是因为 getElementsByClassName 只返回 HTMLCollection<Element> ，而 Element 没有 style 属性。 HTMLElement 但是 确实 通过它的 ElementCSSInlineStyle 扩展接口来实现它。

请注意，这种类型转换是类型安全的，因为每个 Element 要么是 HTMLElement 要么是 SVGElement ，并且我希望你的 元素 不要班级。

原文由 Jonas Wilms 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Jonas Wilms 的 回答 并不完全正确（现在？）。

虽然我怀疑在这种情况下类型转换不会导致任何问题，但我仍然会尽可能避免类型转换。在这种情况下，您可以避免使用 instanceof narrowing 进行类型转换：

 const test = Array.from(
  document.getElementsByClassName('mat-form-field-infix')
)
test.forEach((element) => {
  if (!(element instanceof HTMLElement)) {
    return
  }

  element.outerHTML =
    '<div class="good-day-today" style="width: 0px;"></div>' // Please note that this line works fine!
  element.style.padding = '10px'
  element.style.borderTop = '0'
})

原文由 Jonathan 发布，翻译遵循 CC BY-SA 4.0 许可协议