Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit eca0ec0

Browse files
authored
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
1 parent 418e6ee commit eca0ec0

File tree

6 files changed

+18
-20
lines changed

6 files changed

+18
-20
lines changed

‎docusaurus/docs/adding-typescript.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ title: Adding TypeScript
88
To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:
99

1010
```bash
11-
$ npm install --save typescript @types/react @types/react-dom @types/jest
11+
$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
1212
$ # or
13-
$ yarn add typescript @types/react @types/react-dom @types/jest
13+
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
1414
```
1515

1616
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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,9 @@ function run(
373373
const packageToInstall = getInstallPackage(version, originalDirectory);
374374
const allDependencies = ['react', 'react-dom', packageToInstall];
375375
if (useTypescript) {
376+
// TODO: get user's node version instead of installing latest
376377
allDependencies.push(
378+
'@types/node',
377379
'@types/react',
378380
'@types/react-dom',
379381
'@types/jest',

‎packages/react-scripts/config/paths.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ module.exports = {
8484
appPackageJson: resolveApp('package.json'),
8585
appSrc: resolveApp('src'),
8686
appTsConfig: resolveApp('tsconfig.json'),
87+
appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
8788
yarnLockFile: resolveApp('yarn.lock'),
8889
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
8990
proxySetup: resolveApp('src/setupProxy.js'),
@@ -106,6 +107,7 @@ module.exports = {
106107
appPackageJson: resolveApp('package.json'),
107108
appSrc: resolveApp('src'),
108109
appTsConfig: resolveApp('tsconfig.json'),
110+
appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
109111
yarnLockFile: resolveApp('yarn.lock'),
110112
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
111113
proxySetup: resolveApp('src/setupProxy.js'),
@@ -138,6 +140,7 @@ if (
138140
appPackageJson: resolveOwn('package.json'),
139141
appSrc: resolveOwn('template/src'),
140142
appTsConfig: resolveOwn('template/tsconfig.json'),
143+
appTypeDeclarations: resolveOwn('template/src/react-app-env.d.ts'),
141144
yarnLockFile: resolveOwn('template/yarn.lock'),
142145
testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'),
143146
proxySetup: resolveOwn('template/src/setupProxy.js'),

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
//@remove-file-on-eject
2-
// Do not edit this file. It's replaced every time you launch a toolbox action.
3-
// If you need to add additional declarations, please do so in a new file.
1+
/// <reference types="node" />
2+
/// <reference types="react" />
3+
/// <reference types="react-dom" />
44

55
declare namespace NodeJS {
66
interface ProcessEnv {

‎packages/react-scripts/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"bin": {
2222
"react-scripts": "./bin/react-scripts.js"
2323
},
24+
"types": "./config/react-app.d.ts",
2425
"dependencies": {
2526
"@babel/core": "7.1.0",
2627
"@svgr/webpack": "2.4.1",

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -238,21 +238,13 @@ function verifyTypeScriptSetup() {
238238
writeJson(paths.appTsConfig, appTsConfig);
239239
}
240240

241-
// Copy type declarations associated with this version of `react-scripts`
242-
const declaredTypes = path.resolve(
243-
__dirname,
244-
'..',
245-
'..',
246-
'config',
247-
'react-app.d.ts'
248-
);
249-
const declaredTypesContent = fs
250-
.readFileSync(declaredTypes, 'utf8')
251-
.replace(/\/\/@remove-file-on-eject\r?\n/, '');
252-
fs.writeFileSync(
253-
path.resolve(paths.appSrc, 'react-app.d.ts'),
254-
declaredTypesContent
255-
);
241+
// Reference `react-scripts` types
242+
if (!fs.existsSync(paths.appTypeDeclarations)) {
243+
fs.writeFileSync(
244+
paths.appTypeDeclarations,
245+
`/// <reference types="react-scripts" />${os.EOL}`
246+
);
247+
}
256248
}
257249

258250
module.exports = verifyTypeScriptSetup;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /