Expert-level knowledge for typing your React apps with TypeScript.

The Advanced React Workshop is a **pre-release** product. It is almost full recorded and will be released fully in a month or so.

Enhance the type safety of React props by leveraging discriminated unions to restrict possible variations.

Type-Checking React Props With Discriminated Unions

Figure out how to fix a common type error that occurs when destructuring props with discriminated unions in React components.

Destructuring Discriminated Unions in React Props

Learn how to add a required React property to different variants of a discriminated union in TypeScript

Adding a Prop Required Across Discriminated Union Variants

Handle a situation where a Boolean is used as a discriminator in a discriminated union, and learn how to use a default value to avoid passing unnecessary props.

Differentiating Props With a Boolean Discriminator

In this exercise, you will learn how to use the Record type to represent an empty object by passing in a string and never type.

Using the Record Type to Represent an Empty Object

In this exercise, we'll be using a discriminated union to handle different behaviors based on a prop value due.

Conditionally Require Props With Discriminated Unions

Explore how to find a better type definition for a mapped React component.

Finding a Better Type Definition For A Mapped Component

TypeScript infers data structures, allowing a type to serve as the source of truth, with props inferred from runtime behavior.

Syncing Types without Manual Updates

There is a quirk in TypeScript where autocompletion for types with predefined values and strings doesn't work quite as you might expect.

The Partial Autocompletion Quirk

Using `as const` and indexed access types helps you extract keys and values from a type.

Extracting Keys and Values from a Type

TypeScript has a few different ways to ensure correct inference depending on how restrictive or permissive your checking needs to be.

Ensuring Correct Inference for Prop Types

Inference from a Single Source of Truth

Advanced Props

Generics and type helpers combine to create reusable code that's easy to understand and maintain.

DRY out Code with Generic Type Helpers

Refactor complex type logic into a type helper.

Refactoring to a Type Helper

Generic type parameters can be constrained to accept only specific values, improving the reliability and predictability of your type helpers.

Constraining a Type Helper to Accept Specific Values

Type arguments allow us to pass in a type to a hook, which can be used to provide more accurate return values.

Adding Type Arguments to a Hook

Learn how TypeScript behaves when wrapping one generic function inside of another generic function.

Wrapping a Generic Function Inside of Another

Generics are useful for components, especially in situations where different props depend on each other.

Applying Generics to Components

There are still class components in legacy codebases, so it's important to understand how to make them generic.

Generics in Class Components

Discover how to use type enforcement in React components to address data inconsistencies in a user table, preserving data integrity.

Passing Type Arguments To Components

Generics enable the useful pattern of inferring type arguments through multiple different type helpers.

Generic Inference through Multiple Type Helpers

Discover how to optimize your code by making use of generic hooks and type constraints in useMutation. 

Build a useMutation hook

Generics aren't always the best solution for every problem. Sometimes, a different approach is better suited for the task at hand.

Generics vs Discriminated Unions

Using Generics with Components

Learn how to get better inference from a custom hook without changing its runtime behavior.

Fixing Type Inference in a Custom React Hook

Learn how to create a strongly typed context in React using the createRequiredContext function, and fix type errors that can occur

Strongly Typing React Context

Learn a pattern for managing complex state that helps you track every possible state your application can be in.

Using TypeScript to Manage Complex State

Clever usage of TypeScript types provides a great alternative to useReducer for tracking multiple properties in state.

Using Discriminated Unions in useState

Learn how a different type signature can lead to better inference when working with different statuses in React state.

Discriminated Tuples in Custom Hooks

Function overloads resolve type inference issues when a function can return different types of values.

Use Function Overloads for Better Type Inference

By mimicking the function overloads on `useState`, you can make your custom hooks behave in the same way.

Mimicking useState Behavior with Function Overloads

This pattern of creating an outer hook and returning a hook from inside it is sometimes referred to as "currying hooks".

Currying Hooks

Advanced Hooks

React provides a namespace that contains types, functions, and values. Type definitions can help you understand why and how React works the way it does.

Exploring the React Namespace

React gives us a few different types to use for our components. Understanding the differences between them can help you avoid errors and write better code.

JSX.Element, React.ReactElement, and React.ReactNode

A strongly requested feature for React & TypeScript is to strongly type the children. Is this even possible?

Strongly Typing Children in React

JSX.IntrinsicElements is a global interface that contains HTML attributes as properties that you'll when using TypeScript in React.

Exploring JSX.IntrinsicElements

ElementType and ComponentType are two React type helpers which help describe the shapes of components.

Understanding React's ElementType and ComponentType

Learn how to add an interface to React's global namespace.

Appending to React's Global Namespace

Declaration merging can be used to modify existing interfaces in the global namespace.

Modify Existing Interfaces in the Global React Namespace

By utilizing declaration merging, you can inform TypeScript of the types of custom elements from external libraries.

Add a New Global Element in TypeScript

The types that React exposes for each element are extensive. Take a deep into these types to understand how they are defined and work.

Exploring HTML Attribute and Element Types

Having an optional test attributes available can be useful for testing elements.

Add Attributes to All Elements with Declaration Merging

Types Deep Dive

Lazy loading allows us to dynamically import and render components, but it can be tricky to type props correctly.

Strongly Typed Lazy Loading

While not as common as it used to be, the Render Props pattern is sometimes the best solution to a problem.

Render Props

Using a Record and the satisfies operator saves you from manually specifying types when multiple components share the same props.

Records of Components with the Same Props

React's implementation of forwardRef has some properties that make it annoying when working with generic components, but it can be worked around.

The Problem With forwardRef

When overriding global behavior, it's best to do it locally to prevent conflicts in library development scenarios.

Fixing forwardRef Locally

Higher Order Components (HOCs) are great for creating reusable functionality in React, but typing a wrapped component has its challenges.

Typing Higher Order Components

Our current Higher Order Component implementation doesn't work with generic components. Let's fix that.

Using Higher Order Components with Generic Components

The `as` prop is one of the most complex in TypeScript, and there are lots of different ways to approach it.

The `as` Prop in React

The current implementation of the `Wrapper` function works for intrinsic elements, but needs adjustment in order to support custom components.

The `as` Prop with Custom Components

There are a couple ways to define defaults when working with the `as prop`– one more simple than the other.

The `as` Prop with Defaults

The task of building a generic component that supports defaults and properly infers the `as` prop is a complex challenge, but it is solvable.

The `as` Prop with `forwardRef`

Advanced Patterns

Learn how React Hook Form infers types whether default values are passed or not.

React Hook Form's Types

Creating a wrapper is a common pattern when you don't want to expose all of the functions of a third-party library.

Wrapping the useForm Hook from React Hook Form

Indirection with the way types are declared can be a problem.

React-Select's Generics

TanStack's React Query library has a lot of overloads. Learn how to navigate them and understand the differences between them.

Understanding React Query's Overloads

This time instead of duplicating an API when creating a wrapper, we'll focus just on proper inference.

Wrapping useQuery

Working with External Libraries

Advanced React with TypeScript

React is the framework for professional web development.

The scale and complexity of web applications is always expanding. This has led to missed deadlines, higher costs, and deep frustration on developers like you and your team.

TypeScript is the language of choice for professional web developers. TypeScript lets teams build faster, more robust applications.

TypeScript solves a lot of problems, but it's not a silver bullet. It’s a complex language with a lot of features, and is challenging to use effectively– particularly when it comes to React. 

TypeScript with React is a high-wire act. 

You have to keep your components flexible, type-safe, and structured so you can take advantage of inference and not sacrifice maintainability down the line.

As soon as you start throwing `any`s around or duplicating code you know should be reusable, you’ve lost the plot.

Advanced React with TypeScript by Matt Pocock is your secret weapon.

You’ve found the magic wand you need to stop fighting TypeScript and make it do YOUR bidding like a true wizard.

In this Advanced React with TypeScript workshop, you’ll learn how to combine the most important concepts and patterns of React with TypeScript. 

This combination is a superpower that will change the way you and your team build web applications.

You’ll write custom hooks that use generics, share some (but not all) props between components, and remove guesswork by diving into the types behind the scenes of React and other popular libraries.

This workshop has been vetted and tested with professional senior+ React developers and teams like yours.

Advanced TypeScript with React includes over 50 exercises spanning six in-depth sections: 

## Advanced Props with TypeScript
**Handle props and custom components**

Learn how to shape props to support multiple variants, share selected props between different components, use union types for conditional rendering, and other best practices for your components.

## TypeScript Generics in React
**Leverage generics for your components and custom hooks**

TypeScript generics are a key tool in creating flexible, reusable components and hooks in React.

Generics can be used to define how components should be rendered based on the data and structures passed in. You'll work with custom hooks that support async operations and proper error handling, as well as combine generics with useState and useReducer for complex state management. The exercises in this section will fundamentally change the way you build components.

## Advanced React Hooks with TypeScript
**Harness types to create safer hooks**

Using TypeScript with React Hooks provides serious benefits. You will practice with advanced concepts like returning read-only tuples from custom hooks and implementing function overloads for built-in hooks like useState. You'll implement loading and error states for an async hook, while provided a cancellation mechanism to avoid memory leaks. By the end of this section, you'll have the tools to create well-typed hooks that elevate your component development workflow.

## Types Deep Dive
**Read behind the scenes to build your understanding**

The TypeScript type system forms the backbone of React and other libraries you use on a regular basis. But the errors it gives you can be confusing in the extreme.

Examine the various members of the React namespace, and how to use them to build better prop types. From understanding JSX.IntrinsicElements to augmenting React’s types themselves, you’ll learn everything you need to remove the guesswork when solving React’s nastiest TypeScript errors.

## Advanced Patterns in React with TypeScript
**Recognize and follow industry-standard patterns**

Combining community-adopted React patterns with TypeScript features can significantly optimize your applications and the way you write code. You will work with classic component patterns like Render Props and Higher Order Components, solve the forwardRef problem, and master the ‘as’ prop– all with the added benefits of type safety.

The patterns you learn here will give you ideas for refactoring your existing React codebase - and build powerful design systems

## Leveraging External Libraries
**Safely integrate external libraries into your React components**

Libraries supercharge your React development productivity. But they can be a double-edged sword. With TypeScript, you’re not just adding runtime code– you’re adding types to your project.

You'll create type-safe form components with `react-hook-form`, and learn how to master third-party generics with `react-select`. You will look behind the type definitions behind React Query, and apply what you learn to defining a custom hook to encapsulate its functionality. The lessons you learn from diving deep into types in node modules will be applicable to any third-party library you choose to use.

## Prerequisites

You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the [React with TypeScript Tutorial](https://www.totaltypescript.com/tutorials/react-with-typescript) is recommended.





Expert-level knowledge for typing your React apps with TypeScript.

React TypeScript

Total TypeScript Core Volume is a set of three full TypeScript workshops for the intermediate to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle also includes the Advanced React with TypeScript workshop that will give you expert-level knowledge for typing your React apps.

The Advanced React Workshop is a **pre-release** product. It is almost full recorded and will be released fully in a month or so.

Type Transformations

TypeScript Generics

Advanced TypeScript Patterns

TypeScript Expert Interviews

Core Volume + React Bundle

Using Discriminated Unions to Create Flexible Component Props in React

Manage TypeScript's control flow limitations in discriminated unions with destructuring: balance prop access and discriminator narrowing.

Destructuring vs Accessing Discriminated Union Props

A guide on how to properly use intersection to resolve union types in TypeScript and ensure code readability.

Resolving Discriminated Union Types with an Intersection

Learn how to use discriminated unions to handle conditional props in TypeScript.

Discriminated Unions for Conditional Props in TypeScript

Make props optional in components by typing them as undefined in discriminated union branches.

Allow Optional Props Using A Discriminated Union Branch With Undefined Types

Learn what makes these two React types different and how to use them effectively to ensure type safety in your code.

What's The Difference Between React.ReactNode and React.FC?

The `keyof typeof` pattern in TypeScript to derive types from variables and create dynamic maps for runtime behavior.

The `keyof typeof` Pattern

Wrap the string in parentheses and intersect with an empty object to resolve the partial autocompletion quirk in TypeScript.

Solving Partial Autocompletion

The combination of `as const` and indexed access types allows you to extract keys and values from a type.

Using `as const` and Indexed Access Types to Extract Keys and Values from a Type

Differentiate between annotation operators, "as const", and "satisfies" in TypeScript for optimal type inference and validation based on specific use cases.

Comparing `as const`, `as`, and `satisfies`

Discover the power of keyof and satisfies to ensure type safety while maintaining a single source of truth for your type.

Understanding and Implementing Dynamic Props Mapping in React

A generic type helper makes our code more reusable and easier to understand.

Implement a Generic Type Helper

An "All or Nothing" type helper simplifies complex logic while allowing for flexible object shapes.

Creating an "All or Nothing" Type Helper for React props

Enforcing constraints helps you prevent errors from occurring, and ensures your type helpers are being used in the correct way.

Add Generic Constraints to Type Helpers

By default, type arguments are inferred as `unknown`. When using this type of API in your code, it is crucial to have it well-documented.

Adding Type Arguments to a Function

TypeScript uses type inference to infer the type of generic functions, making them easier to use.

Type Inference with Generic Functions in TypeScript

By adding a generic type argument to a props interface, we can infer prop types.

Add a Generic Type Argument to a Props Interface

Props work the same whether we're using functional components or class components. It's just the generic syntax that's different.

Converting a Class Component to be Generic

In order to get proper inference, the type arguments need to be passed appropriately to the type helpers.

Use the Angle Brackets Syntax to Pass a type to a Component

Adding Generic Type Arguments to Type Helpers

Comparing function arguments rather than the functions themselves should be considered a best practice when dealing with function assignability in TypeScript. 

Refactoring a Generic Hook for Best Inference

Replacing generics with a discriminated union can make your code cleaner and easier to understand while still maintaining the same inference.

Refactoring from Generics to a Discriminated Union

Learn how to identify and resolve type inference problems when using useState in React, ensuring accurate type information for returned values.

Use 'as const' to Infer a Tuple return type

Avoid the common issue of creating a context and not knowing what to pass into it.

Using Type Arguments to Create A Strongly Typed Context

Learn how to properly type complex React state that represents different possibilities using TypeScript.

Handling Complex State Management with TypeScript Unions

Learn how to use discriminated unions with useState to effectively manage different states and properties in your React applications.

Handling Different State Values with Discriminated Unions

Discover how using discriminated tuples in TypeScript gives better inference as demonstrated through an example involving loading, success, and error states.

Improved Type Safety with Discriminated Tuples in TypeScript

Overloading Functions in TypeScript

Be careful when using function overloads, because it's easy to end up in an impossible position and TypeScript won't warn you about it!

Wrapping useState Functionality with Function Overloads

Generics need to be captured at the point where they're used as well as where they're being inferred from.

Inferring Type Arguments in Curried Hooks

The DefinitelyTyped contributors have structured the React types so that they work in both the runtime and type worlds.

Understanding the React Namespace

Learn how JSX.Element, React.ReactElement, and React.ReactNode affect type inference and return values in React components.

Understanding React's JSX Types

Manually call JSX to force the type of children passed to a component to be a specific type.

Strongly Typing Children in React Doesn't Work

JSX.IntrinsicElements is a global interface that contains HTML elements and attributes.

Understand the Structure of React's JSX.IntrinsicElements

Adding interfaces into global namespaces can be useful in a variety of situations.

Merge Namespaces in TypeScript

Learn how to merge interfaces in TypeScript to combine and extend their properties in the same global namespace.

Extend the Global React namespace with Declaration Merging in TypeScript

Type external JSX elements through declaration merging by extending JSX.IntrinsicElements.

Become a TypeScript Wizard