Vue3+TypeScript项目MediaRecorder、BlobEvent找不到名称问题求助

问题分析 #

出现Cannot find name 'MediaRecorder'和Cannot find name 'BlobEvent'报错，是因为TypeScript未正确识别媒体录制相关的DOM API类型，尽管已安装@types/dom-mediacapture-record，但存在类型加载或配置层面的问题。

解决方案 #

1. 显式引入媒体录制类型 #

修改tsconfig.json的compilerOptions.types数组，添加dom-mediacapture-record，强制TypeScript加载该类型定义：

{
  "compilerOptions": {
    // 保留原有配置
    "types": ["webpack-env", "dom-mediacapture-record"]
  }
}

2. 升级TypeScript版本 #

当前使用的~4.1.5版本较旧，对新DOM API类型的支持不完善。升级到稳定的新版本：

npm install typescript@^4.9.0 --save-dev
# 或使用yarn
yarn add typescript@^4.9.0 --dev

3. 手动声明类型（临时快速修复） #

若上述方法暂未生效，可在使用MediaRecorder的组件顶部添加类型声明：

declare var MediaRecorder: typeof import('@types/dom-mediacapture-record').MediaRecorder;
declare type BlobEvent = import('@types/dom-mediacapture-record').BlobEvent;

4. 确认lib配置完整性 #

确保tsconfig.json的compilerOptions.lib包含dom和esnext，这两个库已覆盖媒体录制API所需的基础类型：

{
  "compilerOptions": {
    // 保留原有配置
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  }
}

验证修改 #

修改配置后重启开发服务器：

npm run serve
# 或
yarn serve

检查类型报错是否消失。

内容的提问来源于stack exchange，提问作者Buse ÇALLI