TypeScript报错ts(2339)：类型'HTMLElement'上不存在属性'ariaLabel'如何解决

报错原因 #

TypeScript标准类型定义中未将ariaLabel作为HTMLElement的内置显式属性，该属性属于可选的ARIA扩展属性，因此直接访问会触发类型校验失败。 #

可行解决方案 #

• 方案1：使用原生getAttribute方法（最稳妥，无需额外类型定义）
  直接调用元素的getAttribute方法传入aria-label属性名即可，你确定所有元素都存在该属性时可以追加非空断言!排除null类型：

  const opponentsPkm = Array.from(
    activeRoom.querySelectorAll<HTMLElement>(".rightbar .picon")
  );
  const names = opponentsPkm.map((x) => x.getAttribute("aria-label")!);
  

• 方案2：自定义带ariaLabel属性的元素类型
  先声明扩展的元素接口，查询时直接指定该类型即可：

  interface AriaLabelElement extends HTMLElement {
    ariaLabel: string
  }
  const opponentsPkm = Array.from(
    activeRoom.querySelectorAll<AriaLabelElement>(".rightbar .picon")
  );
  const names = opponentsPkm.map((x) => x.ariaLabel);
  

• 方案3：全局扩展HTMLElement类型（适合项目内多处需要访问ariaLabel的场景）
  在项目的全局类型声明文件（如.d.ts后缀的声明文件）中添加如下定义，之后所有HTMLElement实例都可以直接访问ariaLabel属性：

  interface HTMLElement {
    ariaLabel?: string
  }
  

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