TypeScript扩展Audio原型调用时出现ts2749、ts2339错误如何修复

错误原因说明 #

• ts(2749)：Audio是浏览器内置的音频构造函数（属于可调用的值），不是类型名。DOM中<audio>元素对应的正确类型是HTMLAudioElement，你错误地把构造函数值当做类型用于断言，因此触发报错。
• ts(2339)：TypeScript默认不知道你扩展了HTMLAudioElement的原型新增了restart方法，需要手动声明合并接口让TS识别这个新增属性。

修复步骤 #

1. 新增全局类型声明 #

在你的TS项目中新建全局类型声明文件（比如命名为global.d.ts，需要确保该文件路径在tsconfig.json的include数组覆盖范围内），添加如下代码：

declare global {
  interface HTMLAudioElement {
    // 声明新增的restart方法，参数和返回值和你的实现匹配即可
    restart(): void;
  }
}
// 如果你的声明文件没有其他导入/导出，需要加这一行让TS识别为全局模块
export {}

2. 修正类型断言代码 #

不需要再用as Audio做错误断言，直接用querySelector的泛型指定返回类型即可，修改调用代码为：

// 直接指定泛型为HTMLAudioElement，非空断言保持不变即可
const file = document.querySelector<HTMLAudioElement>("audio")!;
file.restart();

可选优化：原型扩展写法对齐 #

你之前扩展Audio.prototype的代码是可以正常运行的，因为浏览器中Audio.prototype和HTMLAudioElement.prototype指向同一个原型对象，如果你想写法更直观可以修改为：

HTMLAudioElement.prototype.restart = function(){
    this.pause();
    this.currentTime = 0;
    this.play();
}

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