diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md
index 5dee127ee70..b06c01b5147 100644
--- a/docusaurus/docs/adding-typescript.md
+++ b/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**!
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index 6bc7464689f..f0a2d23aba3 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/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',
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index f556b4b196f..70fc76a0140 100644
--- a/packages/react-scripts/config/paths.js
+++ b/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'),
diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts
index 8d91473dc5a..31e990dedaf 100644
--- a/packages/react-scripts/config/react-app.d.ts
+++ b/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.
+///
+///
+///
declare namespace NodeJS {
interface ProcessEnv {
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index dd91e4372fa..69c2ee4b5c4 100644
--- a/packages/react-scripts/package.json
+++ b/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",
diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 068fde69591..eb592deced0 100644
--- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/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,
+ `/// ${os.EOL}`
+ );
+ }
}
module.exports = verifyTypeScriptSetup;