diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 15f75a20d4a..2e0b6a3c974 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -5,12 +5,12 @@ title: Adding TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. -Recent versions of [TypeScript](https://www.typescriptlang.org/) work with Create React App projects out of the box thanks to Babel 7. Beware that Babel 7 TypeScript does not allow some features of TypeScript such as constant enum and namespaces. +Recent versions of [TypeScript](https://www.typescriptlang.org/) work with Create React App projects out of the box thanks to Babel 7. Note that Babel 7 TypeScript does not allow some features of TypeScript such as constant enum and namespaces. To add TypeScript to a Create React App project, follow these steps: -1. Run `npm install --save typescript fork-ts-checker-webpack-plugin @types/react @types/react-dom @types/jest` (or `yarn add typescript fork-ts-checker-webpack-plugin @types/react @types/react-dom @types/jest`). -2. Rename the `.js` files you want to convert. Use `.tsx` if they use JSX or `.ts` if not (e.g. `git mv src/index.js src/index.tsx`). +1. Run `npm install --save typescript @types/react @types/react-dom @types/jest` (or `yarn add typescript @types/react @types/react-dom @types/jest`). +2. Rename the `.js` files you want to convert: use `.tsx` if they use JSX or `.ts` if not (e.g. `git mv src/index.js src/index.tsx`). 3. Create a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) at the root directory with the following content: @@ -38,8 +38,6 @@ To add TypeScript to a Create React App project, follow these steps: Type errors will show up in the same console as the build one. -> Note: If you prefer to run type checking separately from the build process, you can run `npm uninstall fork-ts-checker-webpack-plugin` (or `yarn remove fork-ts-checker-webpack-plugin`) to remove the `fork-ts-checker-webpack-plugin` dependency and then `npx tsc -w` on a new terminal tab. - We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience. To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/). diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 21016b99c69..7a68c14811e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -23,6 +23,7 @@ const getClientEnvironment = require('./env'); const paths = require('./paths'); const ManifestPlugin = require('webpack-manifest-plugin'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt'); // @remove-on-eject-begin const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // @remove-on-eject-end @@ -410,27 +411,15 @@ module.exports = { }), // TypeScript type checking fs.existsSync(paths.appTsConfig) && - (() => { - let ForkTsCheckerWebpackPlugin; - try { - ForkTsCheckerWebpackPlugin = require(resolve.sync( - 'fork-ts-checker-webpack-plugin', - { basedir: paths.appNodeModules } - )); - } catch (e) { - // Fail silently. - // Type checking using this plugin is optional. - // The user may decide to install `fork-ts-checker-webpack-plugin` or use `tsc -w`. - return null; - } - - return new ForkTsCheckerWebpackPlugin({ - async: false, - checkSyntacticErrors: true, - tsconfig: paths.appTsConfig, - watch: paths.appSrc, - }); - })(), + new ForkTsCheckerWebpackPlugin({ + typescript: resolve.sync('typescript', { + basedir: paths.appNodeModules, + }), + async: false, + checkSyntacticErrors: true, + tsconfig: paths.appTsConfig, + watch: paths.appSrc, + }), ].filter(Boolean), // Some libraries import Node modules but don't use them in the browser. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a68ae8da048..41be0d05778 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -27,6 +27,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent') const paths = require('./paths'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt'); // @remove-on-eject-begin const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // @remove-on-eject-end @@ -530,27 +531,15 @@ module.exports = { }), // TypeScript type checking fs.existsSync(paths.appTsConfig) && - (() => { - let ForkTsCheckerWebpackPlugin; - try { - ForkTsCheckerWebpackPlugin = require(resolve.sync( - 'fork-ts-checker-webpack-plugin', - { basedir: paths.appNodeModules } - )); - } catch (e) { - // Fail silently. - // Type checking using this plugin is optional. - // The user may decide to install `fork-ts-checker-webpack-plugin` or use `tsc -w`. - return null; - } - - return new ForkTsCheckerWebpackPlugin({ - async: false, - checkSyntacticErrors: true, - tsconfig: paths.appTsConfig, - watch: paths.appSrc, - }); - })(), + new ForkTsCheckerWebpackPlugin({ + typescript: resolve.sync('typescript', { + basedir: paths.appNodeModules, + }), + async: false, + checkSyntacticErrors: true, + tsconfig: paths.appTsConfig, + watch: paths.appSrc, + }), ].filter(Boolean), // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 8c2ec3c5c76..37e7fb8f7c6 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -43,6 +43,7 @@ "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.11.1", "file-loader": "2.0.0", + "fork-ts-checker-webpack-plugin-alt": "0.4.10", "fs-extra": "7.0.0", "html-webpack-plugin": "4.0.0-alpha.2", "identity-obj-proxy": "3.0.0",