Automatically setup TypeScript when detected (facebook#5549)

* Don't resolve TS files if it's not detected in the project

* Automatically create tsconfig.json file for user

* Remove always false check

* Add missing file

* Don't filter paths too early

Author: Timer

config/webpack.config.dev.js

@@ -39,6 +39,9 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -150,7 +153,9 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
+    extensions: paths.moduleFileExtensions
+      .map(ext => `.${ext}`)
+      .filter(ext => useTypeScript || !ext.includes('ts')),
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -411,7 +416,7 @@ module.exports = {
       publicPath: publicPath,
     }),
     // TypeScript type checking
-    fs.existsSync(paths.appTsConfig) &&
+    useTypeScript &&
       new ForkTsCheckerWebpackPlugin({
         typescript: resolve.sync('typescript', {
           basedir: paths.appNodeModules,

config/webpack.config.prod.js

@@ -57,6 +57,9 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -224,7 +227,9 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
+    extensions: paths.moduleFileExtensions
+      .map(ext => `.${ext}`)
+      .filter(ext => useTypeScript || !ext.includes('ts')),
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/

scripts/utils/verifyTypeScriptSetup.js

@@ -15,16 +15,33 @@ const path = require('path');
 const paths = require('../../config/paths');
 const os = require('os');
 const immer = require('react-dev-utils/immer').produce;
+const globby = require('react-dev-utils/globby').sync;
 
 function writeJson(fileName, object) {
   fs.writeFileSync(fileName, JSON.stringify(object, null, 2) + os.EOL);
 }
 
+function verifyNoTypeScript() {
+  const typescriptFiles = globby('**/*.(ts|tsx)', { cwd: paths.appSrc });
+  if (typescriptFiles.length > 0) {
+    console.warn(
+      chalk.yellow(
+        `We detected TypeScript in your project (${chalk.bold(
+          `src${path.sep}${typescriptFiles[0]}`
+        )}) and created a ${chalk.bold('tsconfig.json')} file for you.`
+      )
+    );
+    console.warn();
+    return false;
+  }
+  return true;
+}
+
 function verifyTypeScriptSetup() {
   let firstTimeSetup = false;
 
   if (!fs.existsSync(paths.appTsConfig)) {
-    if (!paths.appIndexJs.match(/\.tsx?$/)) {
+    if (verifyNoTypeScript()) {
       return;
     }
     writeJson(paths.appTsConfig, {});
@@ -41,14 +58,12 @@ function verifyTypeScriptSetup() {
     }));
   } catch (_) {
     console.error(
-      chalk.red(
-        'We detected a',
-        chalk.bold('tsconfig.json'),
-        "in your package root but couldn't find an installation of",
-        chalk.bold('typescript') + '.'
+      chalk.bold.red(
+        `It looks like you're trying to use TypeScript but do not have ${chalk.bold(
+          'typescript'
+        )} installed.`
       )
     );
-    console.error();
     console.error(
       chalk.bold(
         'Please install',
@@ -60,9 +75,11 @@ function verifyTypeScriptSetup() {
       )
     );
     console.error(
-      'If you are not trying to use TypeScript, please remove the ' +
-        chalk.cyan('tsconfig.json') +
-        ' file from your package root.'
+      chalk.bold(
+        'If you are not trying to use TypeScript, please remove the ' +
+          chalk.cyan('tsconfig.json') +
+          ' file from your package root (and any TypeScript files).'
+      )
     );
     console.error();
     process.exit(1);