Refactor a React Application to TypeScript

Walkthrough of the Refactoring Project

Download TypeScript Importer and Javascript and TypeScript Nightly for VSCode

Configure Emmet, ESlint, and Prettier Extensions

Install and Configure TypeScript and Dependencies

Configure Build Tools to Work with TypeScript

Refactor a React Component using TypeScript

Type React Hooks using TypeScript

Use TypeScript to Type React useReducer

Type a Radio Button Component in React using TypeScript

Use TypeScript to Type a React Class Component

First things first, let's install TypeScript in our project locally using `npm i -D typescript`. Next, I need to install our type dependencies. We could write our own types, but using type dependencies will speed this up and ease our process. So we will install those types using `npm i -D @types/react @types/react-dom`. 

To have TypeScript in our project, we need to create and configure a `tsconfig.json` file. In this lesson, we will quickly configure the basics.

Instructor: [0:00] First thing that we want to do to set up TypeScript within our project is to install TypeScript as a local dependency. We've already configured our editor to use a global version of TypeScript installed by one of our extensions.

[0:11] You may have TypeScript already installed on your machine. There are good reasons, like any other dependency, to install a local version in our project.

[0:21] First of all, you probably have different team members working on the project, and we want everyone to be able to run the code using the same versions. Like all other project dependencies, we don't want issues because different folks are using different versions of the underlying tool.

[0:35] Second, we probably build our app off our machines on some CI tooling running on a Cloud somewhere, and we want to make sure that that tool has access to the same exact version of TypeScript that we're using in our editor.

[0:48] Of course, TypeScript gets updated from time to time, so we want to make sure the code we write is compatible with the same version of TypeScript that we're all using to build our app. Let's install it as a dev dependency with npm. A nice feature in VS Code is that we will always use the local version found in our project's node modules to validate our project.

[1:15] Next, I want to install some type dependencies. Anytime that you use TypeScript with third-party libraries, such as React, that don't bundle its own types, TypeScript will be lacking type information from those modules. We could write our own types, or we could use some types written and maintained by the developers in the community under the DefinitelyTyped project.

[1:37] Luckily, this project includes types for tons of projects already hosted on npm, including React, so let's go ahead and install those with npm as well. All DefinitelyTyped packages are scoped under the @types scope. We will install types for React as well as types for ReactDOM.

[2:04] TypeScript includes any types by default inside the types directory in our node modules, and it maps them to the correct module when you import them, which is super handy. Now that we've installed all of our dependencies, let's start to configure TypeScript for our project.

[2:20] To do this, we need to create a tsconfig.json file. Every TypeScript project should have a TSConfig file. There are loads of settings here, and we won't get into each and every one, but it is helpful to understand the basics so that we know what to expect when TypeScript is checking our code. I'm first going to start with some very simple settings.

[2:44] I'm going to set the include setting to look for and include types and files inside of our src directory because that's where all of our source code lives. I'm also going to set some compiler options.

[2:59] The first compiler option that I'm going to use is the allowJs option. I'm going to set that to true. Since we are going for incremental refactoring, we will still use lots of plain JavaScript modules, and we want TypeScript to allow us to import and use them in our TypeScript files.

[3:18] We also want to set the checkJs option. I'm going to set that to false. A lot of folks might not know this, but you can use TypeScript to check plain JavaScript files with all of your types written in JSDoc syntax. Again, our strategy is incremental, so we don't want TypeScript screaming at us when we haven't written any types in our existing JavaScript files. We'll get there eventually.

[3:41] I'm also going to set this esModuleInterop setting. This is one of my favorite features in TypeScript. The reason is because it means I rarely have to think too much about the mess that it takes to get ESM and CommonJS modules to work together in the same project. In TypeScript, you can just write everything as if it were an ES module and move on with your life.

[4:03] Next, I'm going to set the noEmit option. I'm going to set that to true. The reason for that is because I'm not going to use TypeScript's built-in compiler to emit my JavaScript files. I'm already using Babel, and we'll configure that later to handle TypeScript for us.

[4:19] Then, lastly, I'm going to set this JSX option. TypeScript needs to know what to do with JSX syntax since it's not real JavaScript. Again, I'm using Babel, which already compiles our JSX into React.createElement() for us, so I'm just going to tell TypeScript to leave JSX as it is with the preserve option. I'm going to save my file.

[4:44] With that done, let's reload VS Code so it knows to run TypeScript with all of the new settings that we just made. Congrats. As far as our editor's concerned, we are pretty much done here. The next thing that we need to do is configure our build step to make sure that it knows what to do with all of the TypeScript files that we write.

Course

Refactor a React Application to TypeScript

Install and Configure TypeScript and Dependencies

Share this video with your friends