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

One of the other tools I use is Emmet. It's used for writing HTML much more quickly by using shorthand. It can also be used for JSX. VSCode also supports ESLint which we will use and configure in our VSCode `settings.json`. I will also set up Prettier as my default formatter for TypeScript and TypeScript React files. 

Instructor: [0:00] One tool that I really love is Emmet. Emmet is a tool for using shorthand syntax to write HTML much more quickly. What's cool is that these days, Emmet can do the same for JSX.

[0:11] Emmet support is built into VS Code, but I do want to tell my editor to also use Emmet when I'm writing TypeScript's own React syntax as well. For this, I'll add TypeScript React to the emmet.includeLanguages settings.

[0:25] VS Code also has built-in support for ESLint, but I do want to make sure that it validates TypeScript's React syntax as well as plain Typescript and JavaScript. For this, I will look for the eslint.validate setting and make sure that TypeScript and TypeScript React are both included in that array.

[0:43] I'm also going to set up Prettier as my default formatter for TypeScript and TypeScript React files. Again, totally my preference, but Prettier is pretty great. I don't like to spend time thinking about formatting my code.

[0:55] For this, I need to look for language settings for both Typescript and TypeScript React, and within those settings, going to add the defaultFormatter setting for Prettier so that when I auto-format my code in VS Code, it uses Prettier by default. With that, my editor is pretty much ready to go.

[1:14] Next, we're going to start configuring our project so that our compiler knows what to do with our new TypeScript code.

Course

Refactor a React Application to TypeScript

Configure Emmet, ESlint, and Prettier Extensions

Share this video with your friends