Quasar+TS+Vue项目quasar dev运行报TS2304找不到RTCErrorEvent错误

问题根因 #

你遇到的是IDE TypeScript版本和项目本地TS版本不一致导致的差异问题：WebStorm默认使用自带的高版本TypeScript，内置的lib.dom.d.ts已经包含RTCErrorEvent定义，而项目本地安装的TypeScript版本偏低，对应的DOM类型库没有这个API，因此打包时会触发类型报错。

解决方案 #

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

RTCErrorEvent是TypeScript 4.4版本正式纳入官方DOM类型定义的API，先将项目本地TS升级到4.4及以上版本即可：

npm install typescript@^4.4 --save-dev
# 用yarn的话执行 yarn add typescript@^4.4 -D

升级完成后重新执行quasar dev或quasar build即可解决报错。

方案2：手动补充全局类型声明（无法升级TS版本时使用）

如果项目受依赖限制不能升级TS版本，手动补充缺失的类型定义即可：

1. 在项目src目录下新建global.d.ts类型声明文件，写入以下内容：

// 补充缺失的WebRTC相关类型定义
interface RTCError extends DOMException {
  readonly errorDetail: string;
  readonly sdpLineNumber?: number;
  readonly httpRequestStatusCode?: number;
  readonly sctpCauseCode?: number;
  readonly receivedAlert?: number;
  readonly sentAlert?: number;
}

interface RTCErrorEventInit extends EventInit {
  error: RTCError;
}

interface RTCErrorEvent extends Event {
  readonly error: RTCError;
}

declare var RTCErrorEvent: {
  new(type: string, eventInitDict?: RTCErrorEventInit): RTCErrorEvent;
  prototype: RTCErrorEvent;
};

2. 打开项目根目录的tsconfig.json，把声明文件路径加入include配置确保被TS识别：

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020", "dom"],
    "baseUrl": "."
  },
  "include": ["src/**/*", "src/global.d.ts"]
}

其他问题解答 #

• 不需要修改quasar.conf.js或者babel.config.js，该问题属于TypeScript类型版本不匹配问题，和构建工具配置无关。
• Quasar使用的lib.dom.d.ts就是项目本地TypeScript依赖包里的文件，路径为node_modules/typescript/lib/lib.dom.d.ts，直接打开该文件即可查看当前版本支持的所有DOM API定义。
• 之前安装@types/webrtc无效是因为这个包已经被官方废弃，现在所有WebRTC相关类型都已经合并到TS内置的lib.dom.d.ts中，不需要额外安装第三方类型包。
• eslint不报错是因为eslint仅做语法规范校验，不会执行完整的TS类型编译检查，因此不会捕获这类类型未定义错误。

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