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;