Run ForkTsCheckerWebpackPlugin with async when CI env is used

Created by: insidewhy

See https://github.com/facebook/create-react-app/issues/5820

To briefly summarise: ForkTsCheckerWebpackPlugin is run with async: false due to screen clearing issues hiding console errors, the unfortunate side-effect being that the recompilations take several seconds instead of less than 300ms.

When the CI environment variable is set the screen is not cleared so the "errors being hidden" issue cannot be present. In that case async can be set to true to have much faster compilation times. Then users who wish to use typescript and would prefer to have their development experience be drastically faster and won't mind the screen not being cleared can simply set CI in their package.json.

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

@@ -43,6 +43,7 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
+const asyncTsFork = useTypeScript && process.env.CI && process.env.CI !== 'false';
 
 // style files regexes
 const cssRegex = /\.css$/;
@@ -617,7 +618,7 @@ module.exports = function(webpackEnv) {
           typescript: resolve.sync('typescript', {
             basedir: paths.appNodeModules,
           }),
-          async: false,
+          async: asyncTsFork,
           checkSyntacticErrors: true,
           tsconfig: paths.appTsConfig,
           compilerOptions: {
@@ -637,7 +638,7 @@ module.exports = function(webpackEnv) {
             '!**/src/setupTests.*',
           ],
           watch: paths.appSrc,
-          silent: true,
+          silent: !asyncTsFork,
           formatter: typescriptFormatter,
         }),
     ].filter(Boolean),