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

This course is split up into two main parts. The first half is the TypeScript compiler and how it fits into your existing build infrastructure and local dev environment. The second half is about refactoring your JavaScript code to TypeScript. 

This course is not an intro to React or TypeScript. If you are struggling to follow along because of this, try checking out one of the intros to React or TypeScript courses here on egghead.

https://app.egghead.io/api/v1/lessons/react-refactor-a-react-application-to-typescript/subtitles

Chance Strickland: [0:00] Hey, everyone. Chance the Dev here in San Diego, California, and I am super stoked to talk to you today about refactoring your React application in TypeScript. Just so you know what to expect from this course, we break it down into two main parts.

[0:14] The first half of the course is all about TypeScript the compiler and how it fits into your existing build infrastructure and local dev environment. Chances are, if you're working with an existing application, you've already got all that stuff set up. You need to know how TypeScript fits into that story so that your compiler can read your TypeScript code.

[0:32] The second part of the course is all about refactoring your JavaScript code to TypeScript. We look at this from the perspective of an existing React application, so we talk about refactoring to TypeScript React function components, TypeScript React hooks, all the things you need to know to get up and running and move quickly.

[0:51] What this course is not is it's not an intro to React course, and it's not an intro to TypeScript course. I do expect that you're already pretty familiar and comfortable with React code. If you're not, I would recommend looking for a more introductory level React course before you jump into this one.

[1:08] I don't expect that you're an expert in TypeScript already, but I also don't spend any time talking about basic language features, syntax, or that sort of thing. If you're new to Typescript and still struggle following along with what we're writing, I do recommend checking out the TypeScript documentation or looking for another intro to TypeScript course here on egghead.

[1:27] With all that out of the way, let's get started.

Refactor a React Application to TypeScript

Share this video with your friends

Course

Refactor a React Application to TypeScript