Vue3全新TypeScript项目中'importsNotUsedAsValues'弃用错误修复咨询

你的Vue3 TypeScript项目使用以下tsconfig.json配置：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

遇到的错误提示：

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption "ignoreDeprecations": "5.0" to silence this error.
Use 'verbatimModuleSyntax' instead.

修复方案 #

方案一：使用官方推荐的替代配置（推荐长期使用）

TypeScript 5.0+ 官方推荐用verbatimModuleSyntax替代已弃用的importsNotUsedAsValues，只需在compilerOptions中添加该配置项，即可覆盖继承自@vue/tsconfig的旧设置。

修改后的完整tsconfig.json：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "verbatimModuleSyntax": true
  }
}

verbatimModuleSyntax的核心作用是严格遵循你编写的模块语法处理导入导出：

• 保留类型专用的import type语法
• 非类型导入即便未被使用也会保留，避免Tree-shaking误删必要代码

方案二：临时忽略弃用警告（短期过渡用）

如果暂时不想切换新配置，可以添加ignoreDeprecations屏蔽警告，但该方案仅支持到TypeScript 5.4版本，5.5后会完全失效。

修改后的compilerOptions片段：

"compilerOptions": {
  "composite": true,
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  },
  "ignoreDeprecations": "5.0"
}

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