Refine how TypeScript env types are handled (#5593)

* Specify types in package

* Do not remove types file on eject

* Stop copying types into generated project

* Reference react and react-dom

* Reference node types

* Install node types as well

* Restore copying

* Add Node to the list of installed types

* Reference Jest types

* Remove jest types from install

* Remove jest from CRA install

* Remove Jest reference and let user do this themselves

* Stop copying types file

* Add types key to package.json

* Add appTypeDeclarations and create when missing

* Rename declarations file

* Add Jest back to install instructions

* Minimize diff

Author: Timer

docusaurus/docs/adding-typescript.md

@@ -8,9 +8,9 @@ title: Adding TypeScript
 To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:
 
 ```bash
-$ npm install --save typescript @types/react @types/react-dom @types/jest
+$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
 $ # or
-$ yarn add typescript @types/react @types/react-dom @types/jest
+$ 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**!

packages/create-react-app/createReactApp.js

@@ -373,7 +373,9 @@ function run(
   const packageToInstall = getInstallPackage(version, originalDirectory);
   const allDependencies = ['react', 'react-dom', packageToInstall];
   if (useTypescript) {
+    // TODO: get user's node version instead of installing latest
     allDependencies.push(
+      '@types/node',
       '@types/react',
       '@types/react-dom',
       '@types/jest',

packages/react-scripts/config/paths.js

@@ -84,6 +84,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
+  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -106,6 +107,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
+  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -138,6 +140,7 @@ if (
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),
+    appTypeDeclarations: resolveOwn('template/src/react-app-env.d.ts'),
     yarnLockFile: resolveOwn('template/yarn.lock'),
     testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'),
     proxySetup: resolveOwn('template/src/setupProxy.js'),

packages/react-scripts/config/react-app.d.ts

@@ -1,6 +1,6 @@
-// @remove-file-on-eject
-// Do not edit this file. It's replaced every time you launch a toolbox action.
-// If you need to add additional declarations, please do so in a new file.
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
 
 declare namespace NodeJS {
   interface ProcessEnv {

packages/react-scripts/package.json

@@ -21,6 +21,7 @@
   "bin": {
     "react-scripts": "./bin/react-scripts.js"
   },
+  "types": "./config/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.1.0",
     "@svgr/webpack": "2.4.1",

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -238,21 +238,13 @@ function verifyTypeScriptSetup() {
     writeJson(paths.appTsConfig, appTsConfig);
   }
 
-  // Copy type declarations associated with this version of `react-scripts`
-  const declaredTypes = path.resolve(
-    __dirname,
-    '..',
-    '..',
-    'config',
-    'react-app.d.ts'
-  );
-  const declaredTypesContent = fs
-    .readFileSync(declaredTypes, 'utf8')
-    .replace(/\/\/ @remove-file-on-eject\r?\n/, '');
-  fs.writeFileSync(
-    path.resolve(paths.appSrc, 'react-app.d.ts'),
-    declaredTypesContent
-  );
+  // Reference `react-scripts` types
+  if (!fs.existsSync(paths.appTypeDeclarations)) {
+    fs.writeFileSync(
+      paths.appTypeDeclarations,
+      `/// <reference types="react-scripts" />${os.EOL}`
+    );
+  }
 }
 
 module.exports = verifyTypeScriptSetup;