Expert-level knowledge for typing your React apps 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.





React TypeScript

Advanced React with TypeScript

Total TypeScript Complete Volume is a set of five full TypeScript workshops for the advanced-beginner to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle includes all of the Total TypeScript self-paced workshops.

Total TypeScript Pro Essentials is the **ultimate guide to becoming a TypeScript Wizard**.

Pro Essentials **requires zero TypeScript knowledge** to get started. We'll start with setting up your IDE and understanding TypeScript's place in the build process. We'll cover everything you need to go from a good JavaScript developer to a great TypeScript developer.

But we won't stop there. The material goes all the way up to advanced topics like generics, type guards and building shared utilities. If you feel like **you never _really_ learned TypeScript**, now's your chance.

We don't believe in sitting back and learning passively. With over **200 lessons in 17 sections**, the Pro Essentials workshop is a _practical_ course. The material has been tested in several in-person workshops and refined with feedback from hundreds of students.

Whether you're picking up TypeScript for the first time, or want to deepen your knowledge, Pro Essentials is the course for you.

Here’s what’s included:

## Introduction to TypeScript

Kickstart your TypeScript setup with a refresher on the core benefits and concepts of TypeScript: initial configuration, the TypeScript compiler, and type inference.

Follow the recommended setup and extensions for your editor, with a focus on Visual Studio Code, and become familiar with features like navigation, autocompletion, refactoring, and writing self-documenting code.

Understand TypeScript's role in the build process, and why browsers need help understanding the syntax. Structure your project to work nicely with the compiler, and configure for working with modern build tools like Vite and hot module replacement (HMR). Practice setting up type checking in a CI/CD pipeline, preventing errors from reaching production.

## TypeScript Fundamentals

Reinforce your foundational skills by working with TypeScript's essential types and annotations. You'll work with function parameters and return types, and model data with object literal types, arrays, and tuples. Write reusable type aliases, correctly type async code, and handle data that comes from external sources. Create more flexible types by using unions, intersections, and interfaces.

Write more expressive code that refines types through several narrowing techniques, and recognize the role of any, never, and unknown in your codebase.

## Objects, Classes, and Mutability

Types, interfaces, and classes all have their place in TypeScript. Learn the differences between them, and how to choose the right structure for your needs. Work with dynamic data in objects, and and overcome index signature limitations by using mapped types. Practice using essential type helpers like Pick, Omit, and Partial, and how to build your own helper when you need to.

Develop the mental model for how mutability affects type inference and safety. Recognize the benefits of immutable data structures, and how to work around their quirks.

Apply object-oriented programming principles to your TypeScript code. Understand the role of classes, constructors, and access modifiers, and how to use inheritance and composition to build complex systems that follow real-world design patterns.

## Working with the Compiler

Harness the power of the TypeScript compiler to derive types from values, while furthering your understanding of type inference. Create new kinds of type aliases, and use indexed access types to target nested properties.

Recognize when TypeScript needs your help through type annotations and assertions, and the purpose of as, asserts, and satisfies. Apply these techniques to real-world scenarios like working with DOM APIs, parsing JSON, and creating configuration objects.

## Understanding the Environment

Distinguish between TypeScript modules and scripts, and prevent global scope pollution. Provide types for JavaScript files and third-party libraries, and understand the role of ambient declarations.

Safely modify global interfaces like Window through declaration merging, work with namespaces like JSX, and understand when to use .d.ts type definition files vs. modules.

Learn best practices for configuring TypeScript's behavior based on the type of project you're working on. Adjust strictness levels, module resolution, and generate type declaration files. Use TypeScript as a linter, and optimize build performance for large projects.

## Advanced Application Development

Understand the core differences between CommonJS (CJS) and ES Modules (ESM), and how TypeScript handles module syntax. Learn to use file extensions for guiding module resolution, and configure TypeScript settings for more consistent behavior. Make informed decisions about when to adopt ESM into your projects, and build libraries that support both CJS and ESM consumers for maximum compatibility.

Practice domain modeling by representing real-world concepts and encoding business logic within your types. Establish single sources of truth for type definitions, and create reusable generic type utilities. Enforce stricter type checking with well-placed constraints.

Combine generics and function overloads for maximum flexibility, and create custom type guards and predicates to enhance type inference. Create type-safe APIs with template literal types, mapped types, and custom error types.


Pro Essentials Workshop

TypeScript Pro Essentials

The Type Transformations workshop is your guide to TypeScript features and patterns that allow you to manipulate types to produce exactly what you want. As you begin to see how the pieces fit together, you’ll find yourself writing less code that is easier to maintain.

There are over 50 exercises in this workshop, each with a challenge designed to help you learn to wield the power of transforming strings into objects, objects into unions, and everything in between.

<Testimonial author={{name: "Laila Straube"}}>I am sorry but I can not say it in different words. **THIS WORKSHOP IS FU^^ING AMAZING.**</Testimonial>

## Inference Basics 

The TypeScript compiler uses type inference to automatically determine the data type of a value depending on the context in which it is used. We can use several utilities and operators to define our own types more precisely.

## Unions & Indexing Unions

Union types play a key role in the type transformation process. In this section we will work at unions and discriminated unions, as well as how to access their properties with indexed access types. Several of TypeScript’s built-in utility types will also be explored.

## Template Literals 

As of TypeScript 4.1, template literals can be used to power amazing inference on strings. In this section we’ll practice using template literals to help create object types, split strings into tuples, and other useful transformations.

## Type Helpers

Type helpers allow you to manipulate and work with types in a more convenient way. They allow you to set constraints that ensure your types are as you expect while retaining flexibility for reuse. The type helper pattern is important to understand, as it forms the basis of many of TypeScript's core features.

## Conditional Types & Infer 

In this section, we will further explore how to leverage the type helpers pattern, paying special attention to conditional types and inference when working with functions, objects, and Promises.

## Mapped Types 

With TypeScript's mapped types, you can transform any type into and out of objects, unions, and tuples. It's an amazingly flexible tool for creating all sorts of different types. You’ll get practice with all of these, as well as using template literals to dynamically customize your types. One learner wrote they'd been using TS for 2 years and finally understood Mapped Types after this section!

## Challenges

To tie up the previous exercises, we've put together several real-world challenges that will put your Type Transformation skills to the test.

Type Transformations Workshop

Type Transformations

The Generics workshop is your guide to mastering one of TypeScript's most complex features.

Through dozens of exercises, you'll get to grips with generics from the lowest level, up through examples of how your favorite TS libraries use them.

<Testimonial author={{name: "Tal Faran"}}>Just finished all the Generics sections. Really enjoyed it! It covers realistic problems from our day to day work, and when you reach the end you have strong grasp of how to use generic more efficiently, and in a prettier way that is more accurate of what you wanted to achieve in the first place.</Testimonial>

## Intro to Generics

The best place to start is the start. We'll learn the syntax for assigning generics to functions and classes. We'll learn what's possible with the syntax, and build our very first runtime generic function.

## Passing Type Arguments

TypeScript can infer generics based on arguments passed to functions- but there's an alternative. You can manually pass types as type arguments to functions. We'll cover exactly why this is useful, _when_ it's useful, and what limitations this approach has.

## The Art of Generic Inference

Understanding generics in functions requires deep knowledge of the TypeScript compiler. You usually have multiple options when it comes to representing a generic in a function - and there's often not a right answer. We'll examine exercises which help illuminate these decisions.

## Advanced Generics

There's more to generics than inference. In this section we'll cover generics with conditional types, generic currying, and generics on interfaces. Each come with their own challenges.

## Function Overloads

Sometimes, you don't need a generic. Function overloads provide another method for inferring types from arguments passed to a function. In this section, we'll compare and contrast overloads with generics - and even discuss how they can be combined.

TypeScript Generics Workshop

TypeScript Generics

The Advanced Patterns workshop is a primer on several patterns that emerge from TypeScript's primitives. We'll build on the generics and type transformations work we've done so far - extracting methods for architecting them into novel solutions.

Most of these patterns aren't documented by TypeScript - they've been discovered and iterated on by the TypeScript community. Each section focuses on a different pattern via interactive exercises.

**This workshop is not appropriate for beginners.**

## Branded Types

Branded types (sometimes known as nominal types) let you break the rules of TypeScript by 'naming' types. This opens up a _lot_ of possibilities for using the type system to ensure your app's logic is robust.

## Globals

The often-feared global scope is a necessary part of most applications. Whether you're importing a library via CDN that attaches to `window`, or relying on environment variables, you'll need to know how to strongly type the global scope.

## Type Predicates & Assertion Functions

Type predicates and assertion functions give you the power to customize TypeScript's control flow. When used in combination with `if` statements, they can help improve inference and make your code easier to reason about.

## The Builder Pattern

This section builds on the Generics work we did in the previous workshop. We'll use classes and generics to perform ridiculous feats of inference - building up entire data structures in TypeScript without a single type annotation from the user.

## External Libraries

Diving into external libraries is extremely complex. But it's often necessary to debug complicated type errors. Understanding the flow of generics through an external library can be critical to quickly fixing red lines. We'll look at several popular libraries.

## Identity Functions

Sometimes in TypeScript, you just need a function. Some generic inference isn't possible without an identity function. We'll learn when and where to use them, as well as some powerful type helpers to assist their inference.

Advanced Patterns Workshop

Advanced TypeScript Patterns

Matt Pocock is joined by expert developers, library creators, and core team members who share their experience working with TypeScript.

The conversations cover a variety of topics ranging from TypeScript’s history and growth, to its adoption in the workplace and processes for migrating from JavaScript. Of course, there are also plenty of technical deep dives into how TypeScript features are being used behind the scenes of some of the most popular libraries in use today.

Listening to professionals share their real-world experience and workflows is a great way to refine your own skills and processes.

No matter what level of TypeScript experience you have, you’ll come away with ideas and inspiration that will expand your horizons and further your pursuit of TypeScript Wizardry.

## Daniel Rosenwasser: TypeScript’s History and Growth

Daniel Rosenwasser, the program manager for TypeScript, discusses the language’s history and growth, highlighting key moments such as Angular’s adoption of TypeScript and collaborations that have contributed to its success. TypeScript has gained trust from developers by supporting various frameworks and improving features based on community discussion.

## Shaundai Person: Adopting TypeScript at Netflix

Shaundai Person, a senior software engineer at Netflix, discusses her role in building tools and how adopting TypeScript helps keep the codebase organized, reduces errors, and facilitates a more grounded development approach. Shaundai shares insights on involving leadership in decisions, and how strong mentorship on teams leads to more successful TypeScript implementation.

## Priscila Oliveira: Sentry’s Migration to TypeScript

Priscila Oliveira, software engineer at Sentry, outlines the process that led to the error monitoring tool’s successful migration from JavaScript to TypeScript. She shares the process of planning and coordinating the work across timezones, as well as how the team uses GitHub Actions to run checks. By making the move to TypeScript, Sentry was able to decrease frontend bugs for users while enhancing the developer experience for the team.

## Kadi Kraman: The TypeScript Culture at Formidable

Kadi Kraman, Director of Engineering for Mobile Services at Formidable, talks about using TypeScript for building modern web and mobile apps, and how it has become a natural choice due to the company’s robust software culture. Kadi compares TypeScript to Flow and Elm, discussing its flexibility and ease of learning.

## Gabriel Vergnaud: Type and Value Level Mapping in TypeScript

Gabriel Vergnaud, author of Type Level TypeScript and the ts-pattern library, joins Matt to discuss how TypeScript’s type and value levels map together, the importance of inference, and how generic functions can increase code reusability. Gabriel also shares a real-world example of how Datadog uses internal type helpers and conditional types for complex data handling.

## Orta Therox: Building Familiarity with TypeScript

Former TypeScript core team member Orta Therox offers insights into how developers can become more familiar and productive with TypeScript. Covering topics such as generics and compiler flags, Orta also emphasizes the importance of consulting resources like the TypeScript Handbook when feeling stuck.

## Tejas Kumar: TypeScript for Bulletproof Apps

TypeScript and React expert Tejas Kumar shares his positive experience with TypeScript and its benefits in building “bulletproof” apps. Matt and Tejas discuss integrating TypeScript into the development workflow beyond the IDE, the future of TypeScript, and the added safety provided by using Zod.

## Mark Erikson: Avoiding Breaking Changes & Improving Maintainability

Redux maintainer Mark Erikson talks about his journey learning TypeScript and the challenges he faced refactoring large parts of Redux codebases. Mark also shares his experience improving the TypeScript types of the Reselect library, reducing duplication, and enhancing maintainability.

## Tanner Linsley: Exploring Generics in React Query

Tanner Linsley, creator of the TanStack collection of open-source libraries, shares his experience building React Query with TypeScript. Tanner discusses the importance of generics for customizable data handling and provides tips for effective usage, despite their potential complexity.

## Colin McDonnell: Design Choices Behind Zod

In this interview, Colin McDonnell, the creator of the TypeScript validation library Zod, discusses the motivations and design choices behind the project. Colin explains the importance of deeply understanding generics and conditionals for ensuring type safety, and shares code walkthroughs to demonstrate Zod’s inner workings.

## Alex “KATT” Johansson: Developing tRPC

Alex Johansson, the creator of the popular TypeScript library tRPC, shares challenges faced during development, including complex generics, the builder pattern, and the importance of types to the API. Alex also leads a walkthrough of the code and design decisions behind the tRPC library.

TypeScript Expert Interviews

Complete Volume

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

Using Discriminated Unions to Create Flexible Component Props in React

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.

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

Destructuring vs Accessing Discriminated Union Props

Destructuring Discriminated Unions in React Props

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

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

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.

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

Discriminated Unions for Conditional Props in TypeScript

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.

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

Conditionally Require Props With Discriminated Unions

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

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?

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.

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

The `keyof typeof` Pattern

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.

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

Solving Partial Autocompletion

The Partial Autocompletion Quirk

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

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

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.

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`

Ensuring Correct Inference for Prop Types

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

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.

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

Implement a Generic Type Helper

DRY out Code with Generic Type Helpers

Refactor complex type logic into a 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

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.

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

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.

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

Adding Type Arguments to a Hook

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

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

Type Inference with Generic Functions in TypeScript

Wrapping a Generic Function Inside of Another

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

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

Add a Generic Type Argument to a Props Interface

Applying Generics to Components

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

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

Generics in Class Components

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

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

Passing Type Arguments To Components

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

Adding Generic Type Arguments to 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. 

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

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.

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

Generics vs Discriminated Unions

Using Generics with Components

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

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

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

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

Strongly Typing React Context

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

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

Handling Complex State Management with TypeScript Unions

Using TypeScript to Manage Complex State

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

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

Using Discriminated Unions in useState

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

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

Discriminated Tuples in Custom Hooks

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

Overloading Functions in TypeScript

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.

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

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".

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

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.

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

Understanding the React Namespace

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.

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

Understanding React's JSX Types

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

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

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

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.

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

Understand the Structure of React's JSX.IntrinsicElements

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.

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

Merge Namespaces in TypeScript

Appending to React's Global Namespace

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

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

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.

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

Extend JSX.IntrinsicElements with Declaration Merging

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.

Navigating HTMLAttribute types

Exploring HTML Attribute and Element Types

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

Have a clear understanding of the namespace structure and hierarchy of interfaces in React, you'll be better equipped to handle any errors

Updating the Global Namespace for an Additional Attribute

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.

It's important to understand constraints when typing third-party libraries.

Strongly Typing Lazy Loaded Components with Generics

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.

The Render Props pattern allows for flexibility that can't be achieved with hooks alone.

Typing the Children Prop for Render Props

Render Props

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

The pattern of using a record with satisfies is useful when you have multiple components that share the same props.

Infer Shared Props for Multiple Components

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.

Override forwardRef's Behavior Locally

Fixing forwardRef Locally

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

By making an HOC generic and properly handling the props it is passed, we can create a more flexible component.

Implementing a Generic Higher Order Component

Typing Higher Order Components

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

Advanced React with TypeScript

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

Get Access Today

Advanced React with TypeScript

Trusted by developers from