Vue 3项目中VSCode与Vue CLI构建报错不一致问题的原因及预防方案咨询

为什么空props: {}会导致VSCode报错但构建正常？ #

这个问题的核心在于VSCode + Volar的TypeScript类型校验逻辑，和Vue CLI/Webpack的编译校验逻辑之间的差异：

1. Vue3的类型定义与TypeScript推断
   当你在Options API中声明props: {}时，Vue的TypeScript类型定义会将这个组件的props类型推断为Record<string, never>（严格的空对象类型），意味着这个组件不允许接受任何props属性。而Volar作为Vue官方的VSCode插件，会严格遵循这个类型定义进行实时校验。

2. Vue CLI/Webpack的编译逻辑
   Vue CLI的webpack编译过程中，对空props的处理要宽松得多——它只会检查props的语法是否正确，不会像TypeScript那样进行严格的类型推断校验。只要你的代码在运行时没有实际传递不合法的props，构建就不会报错。

3. 隐式的组件属性冲突
   即使你没有在父组件（比如App.vue）中显式传递props给HelloWorld，Vue在渲染时可能会隐式传递一些内置属性（比如key、ref，或者父组件的attrs）。当你声明了空props: {}，TypeScript会认为这些隐式传递的属性是非法的，从而触发报错，但webpack编译时会忽略这类类型层面的冲突。

如何避免未来出现此类混淆？ #

这里有几个实用的方案：

• 直接移除空的props选项
  如果你的组件不需要任何props，完全不需要保留props: {}这个空选项。Vue会自动将父组件传递的非props属性作为$attrs处理，不会影响组件的正常运行，同时也能避免TypeScript的类型校验报错。

• 明确声明props类型（如果需要）
  如果你之后需要给组件添加props，建议从一开始就用TypeScript的方式明确声明类型，比如在Options API中：

  props: {
    // 这里添加具体的props定义，示例：
    // msg: String
  } as const
  

  或者在<script setup>中使用defineProps：

  const props = defineProps<{
    // 类型定义，示例：
    // msg?: string
  }>()
  

  这样能让Volar的类型校验和Vue CLI的编译逻辑保持一致。

• 理解编辑器校验与编译校验的差异
  记住：VSCode + Volar的校验是实时的类型层面检查，目的是提前发现潜在的类型错误；而Vue CLI的编译校验是语法与运行时检查，主要确保代码能正常转译和运行。两者的校验标准不同，遇到不一致的情况时，优先以TypeScript的类型规范为准，因为它能帮你避免更多潜在的运行时问题。

• 保持工具版本一致
  你已经做了正确的操作——让VSCode使用项目本地的TypeScript版本，这能最大程度减少版本差异带来的校验冲突，建议一直保持这个配置。

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