NextJS中npm run dev时TypeScript错误不显示的解决方法咨询

不同项目脚手架的配置方式略有差异，以下是主流场景的解决方案：

Vite 项目 #

1. 先安装类型检查插件：

   npm install vite-plugin-checker --save-dev
   

2. 修改vite.config.ts，启用插件并配置检查规则：

   import { defineConfig } from 'vite'
   import checker from 'vite-plugin-checker'
   
   export default defineConfig({
     plugins: [
       checker({
         typescript: true, // 开启TS类型检查
         overlay: true // 在浏览器中弹出错误提示层
       })
     ]
   })
   

   重启npm run dev后，终端会实时输出TS错误，浏览器也会显示错误浮层。

Create React App 项目 #

直接修改package.json的脚本，并行启动开发服务和TS类型检查：

1. 先安装并行执行工具：

   npm install npm-run-all --save-dev
   

2. 调整scripts字段：

   "scripts": {
     "dev": "run-p start type-check",
     "start": "react-scripts start",
     "type-check": "tsc --watch"
   }
   

   启动npm run dev后，终端会同时显示开发日志和TS错误。如果想在浏览器控制台看到错误，可以配合ESLint的TS插件，确保ESLint规则包含TS类型检查。

Next.js 项目 #

Next.js默认在dev模式下会把TS错误输出到终端，若没生效，检查next.config.js的配置：

module.exports = {
  typescript: {
    ignoreBuildErrors: false,
    tsconfigPath: './tsconfig.json'
  }
}

浏览器控制台会自动同步显示相关错误，无需额外配置。

原生TS项目 #

在package.json的dev脚本中加入TS实时检查命令：

"scripts": {
  "dev": "run-p type-check dev-server",
  "type-check": "tsc --watch",
  "dev-server": "node dist/index.js" // 替换成你的开发启动命令
}

同样用npm-run-all并行执行类型检查和开发服务，终端就能实时看到TS错误。

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