使用 Next.JS 进行实时 Typescript 检查答案

【问题标题】：Live Typescript Checking with Next.JS使用 Next.JS 进行实时 Typescript 检查
【发布时间】：2020-12-12 19:43:31
【问题描述】：

使用 Next.JS 检查 TypeScript 错误的唯一方法是使用 npm run build（或 yarn build）。

如果您运行 npm run dev，它不会向您显示 TypeScript 错误，这很糟糕，因为在您开发时在终端窗口中看到它们会更好。

有没有办法让npm run dev显示TS错误？

仅供参考 - 我真的不喜欢使用我的 IDE 来处理 TS 错误。只是我个人的喜好。我更喜欢在终端窗口中看到它们以及所有其他错误。

【问题讨论】：

你可能想使用像 tslint 这样的 linter

标签： typescript next.js

【解决方案1】：

不幸的是，从 Next.js v9.4 开始，development typescript checks are disabled 因为这些检查大大减慢了开发过程。 Tim Neutkens states they expect this to happen on the IDE.

目前，无法重新启用这些检查。

【讨论】：

【解决方案2】：

我遇到了同样的问题。事实证明，我以 .eslintrc 开始了这个项目，并没有指定 与 Typescript 一起使用。所以，当我后来将 TypeScript 添加到项目中时，并没有出现 TS 错误。

我做了什么来解决这个问题：

已删除.eslistrc
启动 npx eslint --init 确保我选择了使用 Typescript 和 检查语法、发现问题并强制执行代码样式
运行npm run dev，它应该可以工作了

【讨论】：

【解决方案3】：

如果你使用的是 TS4+，你可以这样做：

// package.json

{
  "scripts": {
    "dev": "next dev",
    "dev:ts": "yarn dev & yarn ts:watch", // <-- or use concurrently here
                                          // npmjs.com/package/concurrently
    "ts": "tsc --noEmit --incremental",
    "ts:watch": "yarn ts --watch"
  },

  // ...
}

您还可以像这样提供自定义 webpack 配置：

// next.config.js

module.exports = {
  webpack(config, { dev }) {
    if (dev) {
      const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
      config.plugins.push(new ForkTsCheckerWebpackPlugin());
    }
    return config;
  },
};

正在跟踪功能请求here。

【讨论】：

这只是在终端内显示错误？想让它们显示在屏幕内该怎么做？