Vue 3 TypeScript模板类型校验失效问题排查求助

排查与修复步骤 #

• 匹配vue-tsc版本
  确保vue-tsc版本和Vue 3.3.4兼容，建议安装同大版本的依赖：

  npm install vue-tsc@^3.3.0 --save-dev
  

• 修正Vite Checker配置
  检查vite.config.ts中的checker配置，确保vueTsc完全启用且未排除目标组件：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import checker from 'vite-plugin-checker'
  
  export default defineConfig({
    plugins: [
      vue(),
      checker({
        vueTsc: {
          enable: true,
          exclude: [] // 不要包含你的组件文件路径
        }
      })
    ]
  })
  

• 规范ComponentA的Props定义
  必须使用TS类型标注的defineProps，不能混用JS runtime定义（后者会跳过模板类型检查）：

  <!-- ComponentA.vue -->
  <script setup lang="ts">
  defineProps<{
    duration?: '0' | '0.5' | '1' | '1.5' | '2' | '2.5'
  }>()
  </script>
  

• 重启服务清缓存
  缓存可能导致检查失效，执行强制重启命令：

  npm run dev -- --force
  

• 重置IDE的TS服务
  若用VSCode，按Ctrl+Shift+P执行TypeScript: Restart TS Server，同时确保Volar插件是默认的Vue语言服务。

手动验证 #

直接运行vue-tsc检查命令，确认错误是否能被捕获：

npx vue-tsc --noEmit

如果这条命令能检测到duration="2.7"的错误，说明Vite Checker的配置存在问题；如果仍无输出，需要重新检查Props的TS定义是否正确。

内容的提问来源于stack exchange，提问作者Mohammad A. A. Apu