TypeScript报错TS2339：Element类型无style属性的解决咨询

这个问题是TypeScript严格类型检查导致的典型场景：document.getElementsByClassName()返回的是HTMLCollectionOf<Element>类型集合，而Element基类本身并没有style属性——style是HTMLElement接口的专属属性，只有HTML元素才具备这个特性。

要保留你想要的Array.from + forEach写法，且不用as any，有两种优雅的修复方案：

方案1：获取元素时明确指定HTMLElement类型 #

直接把获取到的元素集合断言为HTMLCollectionOf<HTMLElement>，这样Array.from生成的数组元素类型会被TypeScript识别为HTMLElement，就能直接访问style属性了：

const test = Array.from(document.getElementsByClassName('mat-form-field-infix') as HTMLCollectionOf<HTMLElement>);
test.forEach((element) => {
  element.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>';
  element.style.padding = '10px';
  element.style.borderTop = '0';
});

方案2：在forEach回调中单独断言元素类型 #

如果不想修改集合的整体类型，也可以在遍历过程中把单个元素断言为HTMLElement：

const test = Array.from(document.getElementsByClassName('mat-form-field-infix'));
test.forEach((element) => {
  const htmlElement = element as HTMLElement;
  htmlElement.outerHTML = '<div class="good-day-today" style="width: 0px;"></div>';
  htmlElement.style.padding = '10px';
  htmlElement.style.borderTop = '0';
});

两种方案都能让TypeScript正确识别元素的具体类型，从而允许你访问style属性，同时完全保留了你想要的代码结构。

内容的提问来源于stack exchange，提问作者AmazingDayToday