Vue项目中如何在pre-commit钩子中检测TypeScript错误

要在pre-commit钩子中同时检测TypeScript类型问题，核心是用TypeScript生态的仅类型检查命令（不执行完整构建，速度远快于项目构建），结合lint-staged实现精准检查，具体分场景处理：

一、基础方案：检查所有TypeScript相关文件（配置简单） #

TypeScript自带的tsc --noEmit命令会跳过编译产物生成，只做类型校验，速度足够快，适合小型项目。

步骤： #

1. 确保项目根目录已有tsconfig.json（Vue+TS项目默认已配置）
2. 修改package.json的lint-staged配置，添加类型检查命令：

"lint-staged": {
  "*.(js|ts|vue)": [
    "eslint --cache --fix --max-warnings=0",
    "tsc --noEmit --skipLibCheck"
  ]
}

• --noEmit：仅做类型检查，不生成编译文件
• --skipLibCheck：跳过第三方依赖库的类型检查，进一步提升速度（可选，若不需要可移除）

3. 无需修改husky的pre-commit脚本，提交代码时lint-staged会自动执行新增的类型检查命令。

二、进阶方案：仅检查暂存的文件（速度更快，适合大型项目） #

如果项目文件较多，只检查本次提交的暂存文件能大幅缩短检查时间，可通过以下方式实现：

场景1：Vue2+TS项目（用tsc即可处理类型） #

1. 安装tsc-files工具（让tsc支持指定文件检查）：

npm install tsc-files --save-dev

2. 修改lint-staged配置：

"lint-staged": {
  "*.(js|ts|vue)": [
    "eslint --cache --fix --max-warnings=0"
  ],
  "*.(ts|vue)": [
    "tsc-files --noEmit --skipLibCheck"
  ]
}

场景2：Vue3+TS项目（需用vue-tsc处理SFC类型） #

Vue3的单文件组件（尤其是<script setup lang="ts">）需要vue-tsc来做类型检查，步骤如下：

1. 安装vue-tsc：

npm install vue-tsc --save-dev

2. 修改lint-staged配置，用函数式写法指定仅检查暂存文件：

"lint-staged": {
  "*.(js|ts|vue)": [
    "eslint --cache --fix --max-warnings=0"
  ],
  "*.(ts|vue)": (files) => `vue-tsc --noEmit --skipLibCheck ${files.join(' ')}`
}

补充说明 #

• TypeScript默认会缓存检查结果，第二次及以后的检查速度会明显提升
• 若遇到类型检查报错，需修复后才能提交代码，确保代码类型安全
• 可根据项目需求调整--skipLibCheck等参数，平衡检查速度与严格性

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