Use ts-checker-webpack-plugin for faster type checking

Author: zinserjan

packages/react-scripts/config/webpack.config.dev.js

@@ -15,6 +15,7 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const TsCheckerWebpackPlugin = require('ts-checker-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
@@ -143,14 +144,6 @@ module.exports = {
       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
       // { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('tslint-loader'),
-        enforce: 'pre',
-        include: paths.appSrc,
-      },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
@@ -206,6 +199,9 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         include: paths.appSrc,
         loader: require.resolve('ts-loader'),
+        options: {
+          transpileOnly: true,
+        },
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "sass" loader compiles scss to css.
@@ -343,6 +339,12 @@ module.exports = {
       /module\.css\.d\.ts$/,
       /module\.scss\.d\.ts$/,
     ]),
+    // Type check the files
+    new TsCheckerWebpackPlugin({
+      tsconfig: path.join(paths.appPath, 'tsconfig.json'),
+      tslint: path.join(paths.appPath, 'tslint.json'),
+      memoryLimit: 2048,
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/config/webpack.config.prod.js

@@ -17,6 +17,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');
+const TsCheckerWebpackPlugin = require('ts-checker-webpack-plugin');
 const cssnano = require('cssnano');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
@@ -143,14 +144,6 @@ module.exports = {
       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
       // { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Typescript runs.
-      {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('tslint-loader'),
-        enforce: 'pre',
-        include: paths.appSrc,
-      },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
@@ -198,6 +191,9 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         include: paths.appSrc,
         loader: require.resolve('ts-loader'),
+        options: {
+          transpileOnly: true,
+        },
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.
@@ -444,6 +440,12 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    // Type check the files
+    new TsCheckerWebpackPlugin({
+      tsconfig: path.join(paths.appPath, 'tsconfig.json'),
+      tslint: path.join(paths.appPath, 'tslint.json'),
+      memoryLimit: 2048,
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/config/webpack.config.storybook.js

@@ -4,6 +4,7 @@ const path = require('path');
 const autoprefixer = require('autoprefixer');
 const webpack = require('webpack');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const TsCheckerWebpackPlugin = require('ts-checker-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -88,12 +89,6 @@ module.exports = function(storybookBaseConfig) {
 
   // Register loaders
   storybookBaseConfig.module.rules = [
-    {
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('tslint-loader'),
-      enforce: 'pre',
-      include: paths.appSrc,
-    },
     {
       test: /\.js$/,
       loader: require.resolve('source-map-loader'),
@@ -149,6 +144,9 @@ module.exports = function(storybookBaseConfig) {
       test: /\.(ts|tsx)$/,
       include: paths.appSrc,
       loader: require.resolve('ts-loader'),
+      options: {
+        transpileOnly: true,
+      },
     },
     // "postcss" loader applies autoprefixer to our CSS.
     // "sass" loader compiles scss to css.
@@ -266,6 +264,12 @@ module.exports = function(storybookBaseConfig) {
       /module\.css\.d\.ts$/,
       /module\.scss\.d\.ts$/,
     ]),
+    // Type check the files
+    new TsCheckerWebpackPlugin({
+      tsconfig: path.join(paths.appPath, 'tsconfig.json'),
+      tslint: path.join(paths.appPath, 'tslint.json'),
+      memoryLimit: 2048,
+    }),
   ]);
 
   return storybookBaseConfig;

packages/react-scripts/package.json

@@ -46,6 +46,7 @@
     "react-error-overlay": "^1.0.6",
     "sass-loader": "6.0.5",
     "style-loader": "0.17.0",
+    "ts-checker-webpack-plugin": "^0.1.1",
     "ts-loader": "^2.0.3",
     "tslint": "^5.2.0",
     "tslint-loader": "^3.5.3",