类型检查策略
Vite 只进行代码转译,不执行 TypeScript 类型检查,需额外配置。
Vite 类型检查特点
| 环境 | 类型检查 | |
|---|---|---|
| 开发环境 | 不执行 | |
| 构建环境 | 不执行 |
注意:Vite 使用 esbuild 转译 TypeScript,速度快但不检查类型。
开发时类型检查
Bash
# 使用 vue-tsc(Vue 项目)
npm add -D vue-tsc
# 运行类型检查
vue-tsc --noEmit
构建时集成检查
JSON
// package.json
{
"scripts": {
"build": "vue-tsc --noEmit && vite build"
}
}
vite-plugin-checker
JavaScript
import checker from 'vite-plugin-checker'
export default defineConfig({
plugins: [
checker({
typescript: true
})
]
})
开发时实时类型检查,错误显示在终端和浏览器。
类型检查选项
JavaScript
export default defineConfig({
plugins: [
checker({
typescript: {
root: './src'
}
})
]
})
类型检查时机对比
| 方式 | 检查时机 | 优点 |
|---|---|---|
| vue-tsc --noEmit | 构建前 | 构建阻断错误 |
| vite-plugin-checker | 开发时 | 实时反馈 |
| IDE | 编辑时 | 即时提示 |
推荐配置
JSON
{
"scripts": {
"dev": "vite",
"type-check": "vue-tsc --noEmit",
"build": "npm run type-check && vite build"
}
}
CI 流程集成
YAML
# GitHub Actions
- name: Type check
run: npm run type-check
- name: Build
run: npm run build
要点总结
- Vite 不执行 TypeScript 类型检查
- 使用 vue-tsc 或 tsc 进行检查
- vite-plugin-checker 开发时实时检查
- 构建流程中集成类型检查
📝 发现内容有误?点击此处直接编辑