如何让Vite 4.1.0在TypeScript类型违规时抛出错误？

Vite默认仅对TypeScript做语法转译，不会执行类型检查——这是因为类型检查相对耗时，Vite将这个任务默认交给IDE（比如VS Code）或单独的TypeScript命令。要让Vite在遇到类型错误时抛出错误并停止构建，可通过以下两种方式实现：

方式一：使用vite-plugin-checker插件（推荐，支持实时检查） #

这是Vite官方推荐的类型检查插件，支持开发模式实时提示错误、构建时终止进程。

1. 安装插件：

npm install vite-plugin-checker --save-dev
# 或使用yarn
yarn add vite-plugin-checker -D

2. 修改vite.config.ts配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true, // 启用TypeScript类型检查
      enableBuild: true, // 构建时发现类型错误则终止构建
    }),
  ],
});

配置完成后，开发模式下终端和浏览器会实时显示类型错误；生产构建时，若存在类型违规，Vite会直接抛出错误并停止打包。

方式二：配合tsc命令做前置检查 #

无需额外安装插件，利用TypeScript自身的tsc命令在构建前执行类型检查：

1. 修改package.json中的构建脚本：

{
  "scripts": {
    "build": "tsc --noEmit && vite build",
    "dev": "vite",
    "preview": "vite preview"
  }
}

2. 确保tsconfig.json开启严格类型检查规则，比如：

{
  "compilerOptions": {
    "strict": true,
    // 其他必要配置...
  }
}

执行npm run build时，会先运行tsc --noEmit做类型检查（仅检查不生成文件），若存在错误则终止后续的Vite构建流程。

注意：无论使用哪种方式，都要确保你的tsconfig.json中开启了足够严格的类型检查规则（比如strict: true），否则TypeScript本身不会识别出违规的类型问题。

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