Refactor a React Application to TypeScript

Intro

TypeScript has been growing in popularity among companies who build their products with React, and for good reason!

Types play nicely when working with components, and lead to a super smooth developer experience.

But what if your application is already being shipped and continuously deployed? It doesn't mean you can't take advantage of everything TypeScript has to offer.

Refactoring an application to TypeScript doesn't have to be daunting. Follow Chance's lead, and you'll be well on your way!

The course starts with an overview of some of Chance's favorite tools and their TypeScript-specific settings. These tools will help you search your project's TypeScript paths for auto-importing, a shorthand tool for writing JSX and TypeScript to speed up your writing, and a tool for helping you to maintain your code to a high quality.

The tools are Emmet, ESLint, Prettier, and a variety of VSCode extensions. There's even some rollup and Babel thrown in for transpiling and compiling our TypeScript to make configuration and build setup a breeze.

The Project

Once the tooling is in place, Chance works through converting a completely functional Windows 98-style Minesweeper game away from JS React into one that takes advantage of the power of TypeScript. It'll be clear how changing the JS to TS will not affect the functionality of the game at all but improves the safety of your app.

Topics in the second half of the course include component refactoring as well as adding types to React Hooks, useReducer, and Context. You'll even see how to add types to a legacy Class component!

Chance has several years of experience working with component libraries and this is your opportunity to learn from his experience and apply his process to your own.

Gain these Skills

Chance will give you the knowledge of how to incorporate TypeScript into any React application, whether it's shipped and continuously deployed or not. You'll take the practices and tools that you learn here to be much more productive in your TypeScript, wherever you use it. Lastly, He will give you the knowledge of when you see React Types vs your own custom types.

Prerequisites

This is not an introduction to React or TypeScript course. You will need to have a basic understanding of the two to be able to follow along. If you don't have that basic understanding, or just want a refresher on the subjects, The Beginner's Guide to React and Up and Running with TypeScript are the best two places to start.

What's Next?

The Beginner's Guide to React is the best place to go if you are just starting out in React. This course by Kent C. Dodds covers all the basics to get you up and running with React.

Advanced TypeScript Fundamentals by Marius Schulz will take you beyond the basics to teach you some new language features TypeScript has to offer courtesy of the wonderful team over ta TypeScript.

TypeScript: Tips and Tricks by Kamran Ahmed is where to go once you've started using TypeScript but looking for that little something to take it to the next level.