Angular中HTMLDialogElement为何不存在showModal()方法？

这个报错和浏览器实际支持度无关，是TypeScript内置DOM类型定义版本不匹配导致的：

• 旧版本TypeScript的lib.dom.d.ts中，HTMLDialogElement的类型定义缺失showModal()、show()等方法，还错误将该API标记为废弃，和当前主流浏览器的实际支持情况不符，你看到的废弃警告就是来自过时的类型定义。
• 报错是TS静态类型检查阶段抛出的，不代表浏览器端无法运行该方法，只要运行环境不是IE，代码本身执行不会有问题。

方案1：升级TypeScript版本（推荐） #

新版TypeScript已经修正了HTMLDialogElement的类型定义，补全了所有相关方法、移除了错误的废弃标记，升级后无需额外配置即可正常使用。
执行命令升级到最新稳定版：

npm install typescript@latest --save-dev

升级后重启IDE的TS服务即可消除报错和警告。

方案2：固定TS版本场景下手动补全类型 #

如果项目暂时无法升级TypeScript，可以在项目全局类型声明文件（通常为src/global.d.ts，可自行在tsconfig配置的include范围内新建任意.d.ts文件）中添加如下类型补全代码：

interface HTMLDialogElement extends HTMLElement {
  open: boolean;
  returnValue: string;
  close(returnValue?: string): void;
  show(): void;
  showModal(): void;
}

添加后TS会自动合并类型定义，即可正常识别showModal()方法。

方案3：临时绕过检查（仅用于调试，不推荐长期使用） #

如果只是临时调试需要，可以将元素临时断言为any类型绕过TS检查：

const elem = document.getElementById("dlg") as HTMLDialogElement;
(elem as any).showModal();

这种写法会丢失该元素的类型校验能力，正式代码不建议使用。

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