Porting a create-react application from javascript to typescript

Question

I started a responsive project using the create-react-app a few months ago, and I'm interested in porting the project from Javascript to Typescript.

I saw that there is a way to create a reaction application with typescript using a flag:

--scripts-version=react-scripts-ts 

But I did not find an explanation of how to migrate an existing JS project to TS. I need this to be done gradually, so I can work with .js and .ts files so that I can do the conversion over time. Does anyone have experience in this migration? What are the required steps to take to make this work?

Answer 1

I found a solution for transferring a create-responsive application from JavaScript to typescript, this method does not require extraction.

1. Create a temporary response project using typescript by running the create-react-app --scripts-version=react-scripts-ts (Note: a global install create-react-app installation is required)
2. In your own project - under the package.json file, remove react-scripts
3. Add react-scripts-ts to your project by running yarn add react-scripts-ts or, if you use npm, then npm install react-scripts-ts . Or add "react-scripts-ts": "2.8.0" to package.json.
4. From the project that you created in step 1, copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
5. As part of our own project, in package.json , under the script section, changing react-scripts instances of react-scripts-ts (should be under start , build , test and eject
6. Install the reaction kits by installing the following modules using yarn or npm: @types/node , @types/react and @types/react-dom . Put in the devDependencies section if you are using package.json.
7. Change index.js of index.tsx to index.tsx
8. In your tsconfig.json file, add the following configuration: "allowSyntheticDefaultImports": true - for more information

NOTE. Step 7 may require additional modification depending on what you have in the index.js file (if it depends on the JS modules in the project).

Now you can start your project, and it can work, for those of you who receive an error message. You may need an appropriate loader to handle this file type relation to .js files, this is because babel does not know how to load .js. file from .tsx files. What we need to do is change the configuration of the project. I found that doing this without running eject is using the response-app-rewired package . This package allows you to configure the external configuration into which the default project settings will be added / overridden. We will use babel to upload files of this type. Let him switch to:

1. Install react-app-rewired using yarn or npm
2. In your root folder (where package.json is located) create a new file called config-overrides.js

3. Put this code in the config-overrides file:

    var paths = require('react-scripts-ts/config/paths') module.exports = function override(config) { config.module.rules.push({ test: /\.(js|jsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { babelrc: false, presets: [require.resolve('babel-preset-react-app')], cacheDirectory: true, }, }) return config } 

Edit the package.json file to use response-app-rewired in the start/start-js , build , test and eject scripts, as shown in the project readme file . For example, "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom" .

Now you can start the project, and the problem should be solved. You may need additional modifications depending on your project (additional types, etc.).

Hope help

As suggested here in the comments, you can define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without reacting via app-app. Thanks for mentioning this!

UPDATE: creation-reaction-application version 2.1.0 supports typewriting, so for those of you starting from scratch, you can use it to create a new typewriter application, and according to the documentation, this should be done using the following commands:

 $ npx create-react-app my-app --typescript 

For existing projects, after upgrading to version 2.1.0, add the following packages depending on your project with the following command:

 $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest 

and then you can just rename .js to .ts files.

Answer 2

Create React v2.1.0 was released today with TypeScript support . This means that you no longer need to remove or use the react-scripts-ts plug; all you have to do if you have an existing Create React App project is to install the necessary packages:

 $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest $ # or $ yarn add typescript @types/node @types/react @types/react-dom @types/jest 

Then you can simply rename the .js files .ts files to start using TypeScript.

(If you have an existing application using the create-react-app-typecript branch, here is a tutorial on how to port it to a regular Create React application .)

Answer 3

To do this, you will need to unload the configuration.

After extracting, you should follow these steps:

• Add typescript extensions tsx and ts to the extensions table in the webpack configurations (dev and prod).

• Add ts-loader. Here is an example

   { test: /\.(ts|tsx)$/, include: paths.appSrc, use: [ { loader: require.resolve('ts-loader'), }, ], }, 

• Change eslint to tslint

• Add source-map-loader to be able to debug typescript files.

   { test: /\.js$/, loader: require.resolve('source-map-loader'), enforce: 'pre', include: paths.appSrc, } 

• Create a typescript configuration file and remember to set allowJs to true.