ts-checker-webpack-plugin

Webpack plugin that type checks & lints your TypeScript files blazingly fast.

Installation

Install ts-checker-webpack-plugin via NPM as usual:

$ npm install ts-checker-webpack-plugin --save-dev

Note: This plugin requires TypeScript 2 and optionally TSLint 5

And configure it in your webpack config like below (assumes webpack-config at project root):

const path = require("path");
const TsCheckerWebpackPlugin = require("ts-checker-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          transpileOnly: true, // disable type checker - we will use ts-checker-webpack-plugin for that :)
        }
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          "style-loader",
          {
            loader: "typings-for-css-modules-loader",
            options: {
              modules: true,
              namedExport: true,
              camelCase: true,
            },
          },
        }
      ],
    ]
  },
  plugins: [
    new TsCheckerWebpackPlugin({
      tsconfig: path.resolve("tsconfig.json"),
      tslint: path.resolve("tslint.json"), // optional
      memoryLimit: 512, // optional, maximum memory usage in MB
      diagnosticFormatter: "ts-loader", // optional, one of "ts-loader", "stylish", "codeframe"
    })
  ]
};

Options

new TsCheckerWebpackPlugin(options: object)

|Name|Type|Description| |:--|:--:|:----------| |incremental|boolean|Allows to disable incremental type checking. Default: true| |tsconfig|string|Absolute path to tsconfig.json file.| |tslint|string|Absolute path to tslint.json file. Default: undefined| |tslintEmitErrors|boolean|Report all TSLint failures as webpack errors regardless of the rule severity. Default: false| |memoryLimit|number|Memory limit for the type checker process in MB. Default: 512| |diagnosticFormatter|string|Formatter for TypeScript Diagnostics. One of ts-loader, stylish or codeframe. Default: ts-loader| |timings|boolean|Logs timing information of the type checker. Default: false| |ignoreDiagnostics|number[]|List of TypeScript diagnostic codes to ignore. Default: []| |ignoreLints|string[]|List of TSLint rule names to ignore. Default: []|

Motivation

First off all the approach is based on the idea of fork-ts-checker-webpack-plugin to run the type checking process independently of the actual transpiling of the files with ts-loader to speed things up. But the main motivation for this plugin was to support CSS-Modules with type definitions properly without using any workarounds (1, 2).

Differences to fork-ts-checker-webpack-plugin

• support of typed CSS-Modules with typings-for-css-modules-loader
• works well with create-react-app in watch mode cause type checking errors will be forwarded to webpack
• files are cached internally until they will be invalidated by webpack

Performance tips

You can improve the type checking performance even more with some tweaks in your tsconfig.json.

Skip type checking of all declaration files

You can skip type checking of all declaration files with skipLibCheck: true. See TypeScript Compiler Options.

Reduce files to check

This plugin processes every file that was found by your tsconfig.json. You can reduce the files to process by this plugin with the files, includes and/or exclude option in your tsconfig.json. See TypeScript tsconfig.json.

For example you could exclude your tests, when your test runner checks them already.

License

MIT