[TypeScript] Setup TypeScript type checking

Author: brunolemos

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

@@ -13,6 +13,7 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
@@ -405,7 +406,13 @@ module.exports = {
       fileName: 'asset-manifest.json',
       publicPath: publicPath,
     }),
-  ],
+    // TypeScript type checking
+    paths.isTypeScript &&
+      new ForkTsCheckerWebpackPlugin({
+        async: false,
+        watch: paths.appSrc,
+      }),
+  ].filter(Boolean),
 
   // 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

@@ -13,6 +13,7 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
@@ -477,7 +478,13 @@ 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$/),
-  ],
+    // TypeScript type checking
+    paths.isTypeScript &&
+      new ForkTsCheckerWebpackPlugin({
+        async: false,
+        watch: paths.appSrc,
+      }),
+  ].filter(Boolean),
   // 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.
   node: {

packages/react-scripts/package.json

@@ -44,17 +44,18 @@
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "7.8.2",
     "file-loader": "1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.6",
     "fs-extra": "5.0.0",
     "graphql": "0.13.2",
     "graphql-tag": "2.9.2",
     "html-webpack-plugin": "3.2.0",
     "identity-obj-proxy": "3.0.0",
-    "loader-utils": "^1.1.0",
     "jest": "22.4.3",
+    "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.4.0",
     "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.3.1",
     "optimize-css-assets-webpack-plugin": "^4.0.1",
+    "postcss-flexbugs-fixes": "3.3.1",
     "postcss-loader": "2.1.5",
     "promise": "8.0.1",
     "raf": "3.4.0",
@@ -65,6 +66,7 @@
     "svgr": "1.9.2",
     "sw-precache-webpack-plugin": "0.11.5",
     "thread-loader": "1.1.5",
+    "typescript": "^3",
     "uglifyjs-webpack-plugin": "1.2.5",
     "url-loader": "1.0.1",
     "webpack": "4.8.3",