调用hidePopover方法触发TS2339编译错误，求原因与解决方法

popover是HTML的全局属性，用于标记弹出层元素：

popover全局属性用于将元素标记为弹出层元素。
弹出层元素默认通过display: none隐藏，可通过触发元素（带popovertarget属性的<button>或<input type="button">）或调用HTMLElement.showPopover()方法打开。
弹出层打开时会处于顶层，不受父元素的position或overflow样式影响。

hidePopover()是用于隐藏弹出层的方法：

HTMLElement接口的hidePopover()方法通过将弹出层元素移出顶层并设置display: none来隐藏它（元素需具备有效的popover属性）。

我有一个modal-options组件，点击按钮会调用带popover属性的modal-change-password组件显示弹出层：

<div class="popover">
  <!-- 省略无关代码 -->

  <div id="pwdDocker" class="rounded">
    <button id="updatePwdBtn" popovertarget="updatePwd"><h3>Update password</h3></button>
    <app-modal-change-password id="updatePwd" popover [currentUser]="currentUser" (closeModalEvent)="closeChangePasswordModal()"></app-modal-change-password>
  </div>
</div>

@Component({
  selector: 'app-modal-options',
  templateUrl: './modal-options.component.html',
  styleUrls: ['./modal-options.component.scss'],
})
export class ModalOptionsComponent implements OnInit {

// 省略无关代码

  closeChangePasswordModal(): void {
    const popoverElement = document.getElementById("updatePwd");
    if(popoverElement){
      popoverElement.hidePopover();
    }
  }
}

modal-change-password是弹出层组件，里面的按钮通过EventEmitter向父组件发送事件来关闭弹出层：

<div class="alert-box">
  <!-- 省略无关代码 -->

  <div class="alert-box-action">
    <button (click)="save()">Change password</button>
    <button (click)="onClose()">Close</button>
  </div>
</div>

@Component({
  selector: 'app-modal-change-password',
  templateUrl: './modal-change-password.component.html',
  styleUrls: ['./modal-change-password.component.scss'],
})
export class ModalChangePasswordComponent implements OnInit {
  @Output() closeModalEvent = new EventEmitter<void>();
  
//省略无关部分
  
  onClose(): void {
    this.closeModalEvent.emit();
  }
}

TypeScript编译报错：error TS2339: Property 'hidePopover' does not exist on type 'HTMLElement'. 我很困惑，因为：

1. hidePopover()是方法不是属性
2. 根据文档，这个方法确实属于HTMLElement接口

我还在学TypeScript，可能找错了方向，而且popover属性比较新，没找到相关解决方案。请问为什么会触发这个编译错误？该怎么修改代码解决？

（注：我试过用@ViewChild()替代getElementById()，以及用togglePopover()替代，但都触发同样的错误）

原因 #

TypeScript的内置DOM类型定义文件更新滞后，还未将hidePopover()、showPopover()这类新的Popover API方法添加到HTMLElement的类型声明中，导致编译器无法识别这些方法，从而抛出类型错误。

解决方法 #

方案1：类型断言 #

直接将元素断言为包含目标方法的类型，明确告诉TypeScript该元素具备hidePopover()方法：

closeChangePasswordModal(): void {
  const popoverElement = document.getElementById("updatePwd") as HTMLElement & { hidePopover: () => void };
  if(popoverElement){
    popoverElement.hidePopover();
  }
}

方案2：全局扩展HTMLElement接口 #

在项目中创建一个.d.ts类型声明文件（比如global.d.ts），扩展HTMLElement接口以添加Popover API方法：

interface HTMLElement {
  showPopover(): void;
  hidePopover(): void;
  togglePopover(force?: boolean): void;
}

这样整个项目内的HTMLElement都会自动包含这些方法的类型，无需每次单独断言。

方案3：自定义类型守卫 #

编写类型守卫函数，判断元素是否包含目标方法，兼顾类型安全与代码可读性：

function isPopoverElement(el: unknown): el is HTMLElement & { hidePopover: () => void } {
  return typeof el === 'object' && el !== null && 'hidePopover' in el && typeof (el as any).hidePopover === 'function';
}

closeChangePasswordModal(): void {
  const popoverElement = document.getElementById("updatePwd");
  if(isPopoverElement(popoverElement)){
    popoverElement.hidePopover();
  }
}

方案4：临时绕过类型检查（不推荐） #

使用any类型跳过TypeScript的类型检查，但会丢失类型安全特性，仅适合临时应急：

closeChangePasswordModal(): void {
  const popoverElement = document.getElementById("updatePwd") as any;
  if(popoverElement){
    popoverElement.hidePopover();
  }
}

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