Here we have the `AllOrNothing` and `ToUndefinedObject` type helpers from the previous exercise:

```typescript
type AllOrNothing<T> = T | ToUndefinedObject<T>;

type ToUndefinedObject<T> = Partial<Record<keyof T, undefined>>;
```

However, there's a slight hiccup.

Currently, the type helpers are a bit too flexible. It's not limited to just objects. It can also receive strings, numbers, undefined, null... any possible value.

This is not exactly what we want.

The type helpers should be modified to restrict the input to objects only, and add a warning mechanism for when unsuitable data types are passed in.

## Challenge

Your task is to find a constraint that we can add to `T` to ensure it only accepts specific types of values.

More specifically, we want the value to be an object to be the type that matches what we see in the test:

```typescript
Expect<Equal<AllOrNothing<{ a: string }>, { a: string } | { a?: undefined }>>
```

The main aim is to exclude `strings`, `numbers`, or `undefined` from the list of acceptable types. 

There's not a perfect solution, but we'll look at a couple possible ways to tackle this problem.

Hint: The key phrase you should be looking for is "generic constraints".

Resources:
- [Total TypeScript Generics Workshop](https://www.totaltypescript.com/workshops/typescript-generics)
- [Generics from the TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/generics.html)

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

We'll start by taking a closer look at the concept of generic constraints in TypeScript. 

Imagine we have a runtime function `toUndefinedObject`, which accepts a type parameter `T` and returns an empty object:

```typescript
const toUndefinedObject = (t) => {
  return {};
}
```

If we want to constrain this runtime function to only accept an object, we can specify the type of `t` as `object`. Then when we call it with something that is not an object, TypeScript will throw an error:

```typescript
const toUndefinedObject = (t: object) => {
  return {};
}

toUndefinedObject(123123) // Error!
```

This works for the runtime version, but now we want to apply the same constraint to our `ToUndefinedObject` type helper.

## Using `extends` to Constrain Generic Type Parameters

In order to apply a similar constraint to `T` in our `ToUndefinedObject` type helper, we can use the `extends` keyword. 

Adding `extends object` will constrain `T` to the `object` type. This behaves in the same way as the constraint we mentioned earlier. 

```typescript
type ToUndefinedObject<T extends object> = Partial<Record<keyof T, undefined>>;
```

Now if we try to pass a string to `ToUndefinedObject`, TypeScript will throw an error because a string does not satisfy the `object` constraint.

```typescript
type Example = ToUndefinedObject<string> // Error: 'string' does not satisfy the constraint 'object'.
```

However, we are now getting a new error in the `AllOrNothing` type helper on the `ToUndefinedObject` branch because type `T` does not satisfy the constraint `object`.

```typescript
type AllOrNothing<T> = T | ToUndefinedObject<T>; // Error: Type 'T' does not satisfy the constraint 'object'.
```

We get this error because when there is not a constraint, the type defaults to `unknown`. 

To fix this, we need to constrain the `AllOrNothing` in the same way. 

```typescript
type AllOrNothing<T extends object> = T | ToUndefinedObject<T>;
```

With this constraint in place, TypeScript is now able to correctly handle our `AllOrNothing` type and will throw appropriate errors if the wrong type is passed in. 

## A Catch & Alternative Solution

There's a catch to this solution, though– the `object` type constraint is not perfect.

For example, it allows arrays of any type to be passed in, such as string or number arrays. This is due to TypeScript treating everything apart from primitives as an `object`.

```typescript
AllOrNothing<string[]> // No error!
```

An alternative solution that offers a bit more description is using `extends Record<string, any>`. 

This behaves the same as the `object` type but gives a clearer picture of what's happening. 

```typescript
type AllOrNothing<T extends Record<string, any>> = T | ToUndefinedObject<T>;

type ToUndefinedObject<T extends Record<string, any>> = Partial<Record<keyof T, undefined>>;
```

This solution demonstrates cascading constraints throughout the application and our types. You'll find this pattern of using generic constraints in many open source libraries. 

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

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

[00:00] Generic constraints. Let's imagine that toUndefinedObject here was in fact a runtime function which took in a T and returned an empty object, let's say.

[00:10] So here then, you notice that T, we need to give it something in order to make sure that what we're passing it can be constrained or is constrained to something. So toUndefinedObject, we don't want to be able to pass it a string or a number or anything like that.

[00:24] We only want to be able to pass it a, I think the type that most corresponds to this is actually the object type, lowercase object type. Lowercase object kind of represents sort of any object really, and so we can now pass it an object with a bunch of different properties or things like that,

[00:41] and we can't pass it things like numbers, things like undefined, things like null. So this object looks like a pretty good constraint for this T, but how do we actually map it onto this T up here onto the toUndefinedObject type helper?

[00:57] How do we constrain this? Because you notice that we have to pass something to this one, we have to annotate it somehow, but with this one we can actually just leave it bare, we don't have to annotate it. But we can using the extends keyword, so T extends object.

[01:13] This behaves exactly the same way as this constraint here, where now if we say typeExample equals toUndefinedObject and we pass it in a string, now it's going to yell at us because typeString does not satisfy the constraint object.

[01:31] Same idea. So object is working okay. Now though we've still got all of these errors down here, we've still got this error here. Why is that happening? Well, it's because all or nothing, this one is still unconstrained. And so this means that type T does not satisfy the constraint object.

[01:48] When you don't have a constraint on something, it defaults it to unknown, or TypeScript treats it as if it were unknown. And so we need to constrain this one as well. So we need to say extends object here too. Now everything starts working because this all or nothing type is properly constrained.

[02:06] Like we now get proper errors if we don't pass in the right thing here. But this object type is not quite perfect. And in fact, when I was trying to research this, I didn't actually find a perfect solution for this. The reason it's not perfect is that you can actually pass in like arrays of things. So you can pass in string array here or number array.

[02:26] So that's, I think, because TypeScript really treats everything as an object. And so everything except for primitives as an object, really. The second solution I found, which is maybe a little bit more descriptive than this lowercase object type, is by using extend record string.

[02:45] This at least gives you a little bit more description as to what's happening here, but it behaves actually the same as the object type there. So it's not entirely perfect. But what you notice here is that we get these kind of like cascading constraints throughout our application and throughout kind of our types here.

[03:02] Because if we don't have, let's say, this one, then we're going to get an error. Oh, actually, no, if we don't have the other one, then we're going to get an error just up here because the thing that it relies on doesn't have the proper constraints.

[03:14] So that's a pattern that you see a lot in open source libraries, especially where they have these common constraints that need to flow in through different types and things like that. But generic constraints are extremely powerful for making sure that really that your type helpers are being used in the correct way.

Constraining a Type Helper to Accept Specific Values

[00:00] So we've introduced this new type helper into the code base. Everyone's happy, but there is a problem, which is we have like all or nothing can receive anything, like not just objects, like it can receive strings, numbers, undefined, null. Anything can be passed into this T here, which seems really, really strange.

[00:19] So we want to find a way where we can warn people if they pass in something that's unsuitable. We only want to allow them to pass in objects into here. And while you're at it, we might as well do the same with two undefined object as well, because, you know, one without the other, it looks a little bit strange. So your job is to try to find a constraint

[00:39] that we can add onto this T to make sure it only accepts certain types of values. And to also make sure that kind of the object is the thing that we want to be passed in here. This, there's no perfect solution to this, but really I just want you to get rid of a string or number or undefined from this. And I'll show you the limitations

[00:58] of the few solutions that there are. Anyway, generic constraints, that's what you're looking for. Good luck.

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.

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

TypeScript Pro Essentials

Type Transformations

TypeScript Generics

Advanced TypeScript Patterns

Advanced React with TypeScript

TypeScript Expert Interviews

TypeScript Pro Complete

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

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.

By updating type signatures and changing how props are handled, we can make a Higher Order Component that works with generic components.

Add Generic Component Support to a Higher Order Component

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.

Explored here are two approaches to the `as` prop in React, with one much more efficient than the other.

Transcript

Constraining a Type Helper to Accept Specific Values

Transcript