Vite 默认支持 TypeScript 转译但不进行类型检查，需手动集成 vue-tsc 或 tsc --noEmit --watch 实现开发时类型校验；初始化推荐使用 vue-ts 或 react-ts 模板，并配置 tsconfig.json 启用 "moduleResolution": "bundler" 和 "types": ["vite/client"]。
Vite 默认支持 TypeScript，但类型检查需要额外配置。它本身不自带 TypeScript 类型检查器（tsc），所以必须手动启用或集成。
初始化时选择 TypeScript 模板
创建新项目时最简单的方式是直接使用官方 TypeScript 模板：
- 运行 npx create-vite@latest my-app --template vue-ts（Vue）或 --template react-ts（React）
- 模板会自动生成
tsconfig.json、vite.config.ts和基础 TS 文件 - 安装依赖后，
npm run dev可正常启动，但此时仍不会在开发中实时报类型错误
启用开发时类型检查
Vite 默认只做转译（TS → JS），不执行类型检查。要看到类型错误，需引入 vue-tsc（Vue）或 tsc --noEmit（通用）或 typescript-eslint（配合 ESLint）。
- 推荐方式：安装
vue-tsc（Vue 项目）或直接用tsc --noEmit --watch（纯 TS 或 React） - 在
package.json的 scripts 中添加："type-check": "vue-tsc --watch"（Vue）或"type-check": "tsc --noEmit --watch"（其他） - 然后新开终端运行
npm run type-check，它会监听文件并输出类型错误（不影响 Vite 开发服务器）
配置 tsconfig.json 关键项
确保 tsconfig.json 启用了对 Vite 环境的支持：
立即学习“Java免费学习笔记（深入）”；
-
"moduleResolution": "bundler"（Vite 5+ 推荐，适配 ESM 解析） -
"types": ["vite/client"]（让 TS 识别import.meta.env等 Vite 特有属性） -
"jsx": "preserve"（React 项目必需） - 若用 Vue，还需包含
"vue/macros"或按 Vue 官方 TS 配置 设置
在编辑器中获得正确提示
VS Code 通常能自动识别 tsconfig.json，但有时需手动触发：
- 右键打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）→ 输入 “TypeScript: Select TypeScript Version” → 选 “Use Workspace Version”
- 确认项目根目录有
node_modules/typescript（Vite 模板默认已安装） - 如 import 提示缺失类型，检查是否漏装对应包的
@types/xxx（例如@types/node用于 Node 全局变量）
不复杂但容易忽略：类型检查和热更新是两个独立流程，Vite 负责快启和 HMR，tsc 或 vue-tsc 负责类型校验。两者并行运行才能兼顾开发体验与类型安全。
