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