Vue3中使用Interface类型化Props时出现类型参数报错问题

解决方案步骤 #

1. 检查WebStorm的Vue插件与版本支持 #

• 打开WebStorm设置：File > Settings > Languages & Frameworks > JavaScript > Vue
• 确认Vue version选择为Vue 3，并确保启用了Vue.js支持
• 检查Vue插件是否为最新版本：Settings > Plugins > Vue.js，点击"Update"更新插件

2. 修正TypeScript配置文件 #

在项目根目录的tsconfig.json中添加/完善以下配置，确保TypeScript能正确识别Vue的宏函数类型：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "types": ["vue"] // 引入Vue的类型定义
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3. 完善ESLint配置 #

确保你的ESLint配置文件（.eslintrc.cjs或.eslintrc.json）中正确启用了setup编译器宏，且依赖版本兼容：

• 确认已安装eslint-plugin-vue@^9.0.0及以上版本
• 配置示例：

module.exports = {
  root: true,
  env: {
    node: true,
    'vue/setup-compiler-macros': true // 启用setup宏支持
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {}
}

4. 清除WebStorm缓存并重启 #

WebStorm的缓存可能导致错误提示未更新，执行：

• File > Invalidate Caches...
• 选择Invalidate and Restart，重启IDE后检查错误是否消失

5. 临时替代写法（若以上方案无效） #

如果仍有提示，可以暂时使用类型断言规避，但推荐优先解决根源问题：

const props = defineProps<Props>() as Props;

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