「提高开发效率」忽略ts类型检查 & 关闭webpack对ts的编译

单行忽略(添加到特定行的行前来忽略这一行的错误)

// @ts-ignore

跳过对某些文件的检查 (添加到该文件的首行才起作用)

// @ts-nocheck

对某些文件的检查

// @ts-check

关闭webpack对ts的编译

添加了ts-loader去编译ts代码，多了ts -> js 编译的步骤，自然会增加一些编译时间，为了尽可能减少编译时间。

我们可以，在webpack中设置ts-loader:

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

设置transpileOnly为true， 就会关闭项目运行时的类型检查，只做编译。

为了获得运行时的类型检查，就引入另一个webpack plugin fork-ts-checker-webpack-plugin ，这个插件会将ts的类型检查和eslint的语法检查运行在一个单独的进程中。

插件配置：

module.exports = {
  // ...
  plugins: [
    new ForkTsCheckerWebpackPlugin({
    eslint: {
      files: './src/**/*.{ts,js,vue}',
    },
    logger: {
      devServer: false,
      infrastructure: 'console',
      issues: 'console',
    },
    issue: {
      include: (issue) => issue.severity === 'error',
    },
  }),
  ]
};