Vite 不负责 TypeScript 类型检查，仅用 esbuild 转换语法；类型校验需单独运行 tsc --noEmit，并通过 tsconfig.json 配置 strict、noEmit、include 等选项，配合脚本实现开发时实时检查。

Vite 本身不负责 TypeScript 类型检查，它只用 esbuild 做快速语法转换（TS → JS），类型校验要靠 tsc --noEmit 单独运行。想在开发中真正看到类型错误提示，得把类型检查“接进来”。

关键点：Vite 编译 ≠ 类型检查。两者是解耦的。

---

✅ 正确配置类型检查的三步法

• 安装 TypeScript

  npm install --save-dev typescript

• 创建 tsconfig.json，确保启用类型校验相关选项
  最小必要配置包括：

  • "strict": true（开启全量严格检查）
  • "noEmit": true（禁止输出 JS 文件，只做检查）
  • "include" 明确覆盖源码路径（如 ["src/**/*", "vite.config.ts"]）
  • "exclude": ["node_modules", "dist"]
  • "types": ["vite/client"]（补全 import.meta.env 等 Vite 特有类型）

  示例片段：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "strict": true,
      "noEmit": true,
      "skipLibCheck": true,
      "resolveJsonModule": true,
      "moduleResolution": "NodeNext",
      "baseUrl": ".",
      "paths": { "@/*": ["src/*"] },
      "types": ["vite/client"]
    },
    "include": ["src/**/*", "vite.config.ts", "env.d.ts"],
    "exclude": ["node_modules", "dist"]
  }

• 在开发流程中主动运行类型检查
  推荐方式是在 package.json 中加脚本：

  "scripts": {
    "dev": "vite",
    "type-check": "tsc --noEmit",
    "dev:check": "concurrently \"npm run dev\" \"npm run type-check -- --watch\""
  }

  注：需安装 concurrently（npm install --save-dev concurrently）才能并行执行 dev server 和类型监听。

  

  Java 接口排错助手

  在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

  下载

---

⚠️ 常见问题与修复

• 改了 tsconfig.json 或装了新包后类型提示失效？
  这是 .vite/deps/ 预构建缓存和 TS 语言服务不同步导致的。
  直接删掉 node_modules/.vite 再重启即可。

• VS Code 里报错但 npm run dev 不拦？
  正常。VS Code 自带 TS 语言服务，会实时校验；而 Vite 启动时并不调用 tsc。你得靠 tsc --noEmit 或编辑器内置检查来捕获错误。

• 想对 .js 文件也做类型检查？
  在 tsconfig.json 中加：

  "allowJs": true,
  "checkJs": true

  并在 JS 文件顶部加 // @ts-check 开启单文件校验。

---

? 补充：vite.config.ts 也要类型安全

如果你用 TypeScript 写 Vite 配置（推荐），vite.config.ts 需被 tsconfig.json 的 include 覆盖，并建议加上类型注解：

import { defineConfig, UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig((config: ConfigEnv): UserConfig => {
  return {
    plugins: [vue()],
    resolve: {
      alias: { '@': new URL('./src', import.meta.url).pathname }
    }
  }
})

这样 vite.config.ts 也能享受自动补全和类型校验。

不复杂但容易忽略。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南