Adds TSC_COMPILE_ON_ERROR env var...

docusaurus/docs/adding-typescript.md

@@ -31,7 +31,9 @@ yarn add typescript @types/node @types/react @types/react-dom @types/jest
 
 Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**!
 
-Type errors will show up in the same console as the build one.
+Type errors will show up in the same console as the build one. By default, Create React App prevents you from running the dev server if your code has type errors. If you introduce type errors to your project, you have to fix or ignore them before you continue development.
+
+You can remove this restriction by running your app with the `TSC_COMPILE_ON_ERROR` environment variable set to `true`, for example, by adding `TSC_COMPILE_ON_ERROR=true` as documented in our [advanced configuration](advanced-configuration.md).
 
 To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/).
 

packages/react-dev-utils/README.md

@@ -337,6 +337,7 @@ The `args` object accepts a number of properties:
 - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
 - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.
 - **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`.
+- **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.
 - **webpack** `function`: A reference to the webpack constructor.
 
 ##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object`

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -108,6 +108,7 @@ function createCompiler({
   urls,
   useYarn,
   useTypeScript,
+  tscCompileOnError,
   webpack,
 }) {
   // "Compiler" is a low-level interface to Webpack.
@@ -190,16 +191,28 @@ function createCompiler({
 
       const messages = await tsMessagesPromise;
       clearTimeout(delayedMsg);
-      statsData.errors.push(...messages.errors);
+      if (tscCompileOnError) {
+        statsData.warnings.push(...messages.errors);
+      } else {
+        statsData.errors.push(...messages.errors);
+      }
       statsData.warnings.push(...messages.warnings);
 
       // Push errors and warnings into compilation result
       // to show them after page refresh triggered by user.
-      stats.compilation.errors.push(...messages.errors);
+      if (tscCompileOnError) {
+        stats.compilation.warnings.push(...messages.errors);
+      } else {
+        stats.compilation.errors.push(...messages.errors);
+      }
       stats.compilation.warnings.push(...messages.warnings);
 
       if (messages.errors.length > 0) {
-        devSocket.errors(messages.errors);
+        if (tscCompileOnError) {
+          devSocket.warnings(messages.errors);
+        } else {
+          devSocket.errors(messages.errors);
+        }
       } else if (messages.warnings.length > 0) {
         devSocket.warnings(messages.warnings);
       }

packages/react-scripts/scripts/build.js

@@ -122,9 +122,17 @@ checkBrowsers(paths.appPath, isInteractive)
       );
     },
     err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(chalk.yellow(
+          'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+        ));
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
     }
   )
   .catch(err => {

packages/react-scripts/scripts/start.js

@@ -95,6 +95,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(protocol, HOST, port);
     const devSocket = {
       warnings: warnings =>
@@ -110,6 +111,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
+      tscCompileOnError,
       webpack,
     });
     // Load proxy config