Vue3 TypeScript新项目中Error.cause属性不存在的优化解决方法咨询

问题背景 #

通过npm init vue@latest创建Vue3项目后，在<script setup lang="ts">中使用Error.cause时出现TS错误：

Property 'cause' does not exist on type 'Error'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2022' or later.ts(2550)

尝试修改根tsconfig.json或多个子配置文件时，要么出现console找不到的错误，要么配置不生效。

解决方案 #

Vue3项目通过npm init vue@latest创建后采用TS项目引用（Project References）结构，根tsconfig.json仅作为入口，不会直接影响应用代码的类型检查。需要修改应用代码专属的配置文件tsconfig.app.json：

1. 打开项目根目录下的tsconfig.app.json
2. 更新compilerOptions中的target和lib字段：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "target": "ES2022", // 明确指定ES版本为2022或更高
    "lib": ["ES2022", "DOM"], // 同时包含ES2022语法和DOM环境类型
    "composite": true
  }
}

原理说明 #

• Error.cause是ES2022新增的特性，TypeScript需要target或lib包含ES2022及以上版本才能提供对应的类型定义
• Vue项目的子配置文件（如tsconfig.app.json、tsconfig.vitest.json）不会继承根tsconfig.json的compilerOptions，必须在各自配置中单独设置
• 添加DOM库是为了提供浏览器环境的全局对象（如console）的类型支持，这是Web项目的必要配置

修改完成后，重启编辑器的TypeScript语言服务（或重新打开项目），Error.cause的类型错误即可消失。

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