Advanced Typescript for React – Type React Apps that Scale

Hello and welcome to this course on learning advanced TypeScript the React way. What I mean by this is that I am going to teach you how to use TypeScript features in a React-friendly manner.

Being advanced in using TypeScript in ReactJS projects does not entail developing a large TypeScript codebase with numerous complex type signatures scattered throughout your project. In fact, when using TypeScript with ReactJS, you should allow TypeScript to handle the types as much as possible. You should only intervene to define the signatures that TypeScript cannot deduce on your behalf.

In this course, I will guide you through several demo projects to illustrate a set of real-world challenges that you might encounter while developing React apps using TypeScript.

To start, we will review some basics. I will teach you how to leverage IntelliSense to reverse engineer the types that TypeScript may not automatically detect. We will address various common challenges, such as typing props, children, and basic type helpers. This will help you learn how to comfortably migrate a React component from JavaScript to TypeScript.

Next, we will delve into typing states. We will address challenges related to defining state hooks, primarily using useState. This will involve demonstrating a demo project and managing its states by making use of TypeScript features.

Following that, we will explore reducers and action types. We will implement a reducer for a demo project and tackle issues and conflicts that arise with TypeScript and reducer patterns. We’ll cover concepts like passing dispatch actions as props and employing Template Literals to define type signatures.

Directly after that, we will construct a Context API to share certain props. Naturally, we will also explore how to efficiently implement the Context API using TypeScript.

We will also discuss Generics in TypeScript and demonstrate their usage by creating a custom Context API to enhance our codebase.

Finally, we will examine some more advanced TypeScript concepts and features that can assist you in resolving TypeScript-related issues within your ReactJS projects.

By the conclusion of this course, you will feel confident in showcasing your TypeScript skills. You will be capable of crafting efficient and robust React components without falling into the trap of creating unnecessary types and duplicating boilerplate code.