Advanced Typescript for React - Typescript the React Way

Learn to use correct TypeScript with React components to build more robust and reliable Typescript applications at scale

What you'll learn
Typescript advanced patterns and helper utilities
Developing state management hooks with proper Types
Writing types for reducers and actions
Passing props, children, states and actions with efficient type signatures
Creating custom context api for solving Typescript-related issues with Context APIs
Typescript generics and their use-cases in ReactJS
Writing Types only when needed to keep your codebases concise
Using component patterns such as HOCs and custom hooks with Typescript
Requirements
basic knowledge in ReactJS
Description
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.
Who this course is for:
ReactJS and Front-end developers looking to enhance their Typescript knowladge



More Info