【问题标题】：How to ignore typescript errors when compile by webpack production mode通过 webpack 生产模式编译时如何忽略 typescript 错误
【发布时间】：2020-06-02 08:24:27
【问题描述】：

环境

webpack 4.41.2

打字稿 3.7.2

问题

当我通过webpack开发模式编译文件时，没有问题。但是我用生产模式编译的时候，出现很多错误，无法编译。

目的地

找到在生产模式下 webpack 编译时如何忽略 typescript 错误的方法

代码

▼webpack.config.js（js部分）

{
    mode: "development",
    entry: "./src/index.tsx",
    output: {
        path: `${__dirname}/dist`,
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader"
            },
            {
                test: /\.svg$/,
                loader: "react-svg-loader",
                options: {
                    svgo: {
                        plugins: [
                            { removeTitle: false }
                        ],
                        floatPrecision: 2
                    }
                }
            },
            {
                test: /\.(vert|frag|glsl)$/,
                use: {
                    loader: 'webpack-glsl-loader'
                }
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
},

▼ tsconfig

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "moduleResolution": "node",
    "lib": [
      "es2019",
      "dom"
    ],
    "removeComments": true,
    "noUnusedLocals": false
  }
}

错误内容

ERROR in /var/www/hoge/src/index.tsx
[tsl] ERROR in /var/www/hoge/src/index.tsx(56,33)
      TS2322: Type '(page: any) => void' is not assignable to type 'void'.

ERROR in /var/www/hoge/src/about/index.tsx
[tsl] ERROR in /var/www/hoge/src/about/index.tsx(15,48)
      TS2339: Property 'appRef' does not exist on type 'About'.

ERROR in /var/www/hoge/src/gallery/index.tsx
[tsl] ERROR in /var/www/hoge/src/gallery/index.tsx(8,27)
      TS2307: Cannot find module './picturesData'.

ERROR in /var/www/hoge/src/gallery/index.tsx
[tsl] ERROR in /var/www/hoge/src/gallery/index.tsx(9,9)
      TS2529: Duplicate identifier 'Promise'. Compiler reserves name 'Promise' in top level scope of a module containing async functions.

...and other almost similar 40 errors

到目前为止我已经尝试过什么

·像这样在互联网上查看类似的帖子 Ignore Typescript errors in Webpack-dev-server How to ignore typescript errors with webpack? 但这对我没有帮助

・将此代码添加到 tsconfig.js

"no-consecutive-blank-lines": false,
"no-unused-variable": false,

但错误“未知编译器选项”

【问题讨论】：

你试过strict: false吗？
我在 tsconfig.json 中添加了 "strict": false"，但结果还是一样。也许我误解了什么？？
@ArnaudClaudel 的解决方案在使用 Vue 2.6 的 Quasar 框架 1.14.1 中也适用于我。终于摆脱了所有这些错误

标签： javascript reactjs typescript webpack

【解决方案1】：

使用 ignoreDiagnostics 忽略某些 TypeScript 错误

{
  test: /\.tsx?$/,
  use: "ts-loader",
  options: {
    ignoreDiagnostics: [2322]
  }
},

https://www.npmjs.com/package/ts-loader#ignorediagnostics

【讨论】：

【解决方案2】：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
}

【讨论】：

你应该解释你的代码做了什么以及它如何帮助问题的作者。

【解决方案3】：

在所有文件中添加// @ts-nocheck，并编译。（我认为还有其他更好的方法）

【讨论】：

这违背了使用TS开头的目的