Partials allow you to construct types where some of the higher-level properties are optional. The idea of a DeepPartial takes this further by allowing all of the properties to become optional.

This is useful for when you want to be able to include just some parts of a type.

Consider `MyType` below, which has several properties at various levels:

```tsx
type MyType = {
  a: string;
  b: number;
  c: {
    d: string;
    e: {
      f: string;
      g: {
        h: string;
        i: string;
      }[];
    };
  };
};
```

## Challenge

Your challenge is to create a `DeepPartial` type helper that takes in `MyType` and returns a partial version of it. Read more about <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" target="_blank" rel="noopener">the Partial Utility type</a> in the TypeScript Docs to learn more.

In other words, all of the members of the object will be undefined, including those inside of other objects _and_ other arrays.

Something that may be helpful is that when you're inside of a type, you can actually reuse that type. That means you'll be able to reference `DeepPartial` inside of _itself_.

Conditional and mapped types will be in your solution, as well as some other tools we’ve used throughout the workshop.

Partials allow you to construct types where some higher-level properties are optional. DeepPartial goes further by allowing all properties to be optional.

Here’s what the solution looks like:

```tsx
type DeepPartial<T> = T extends Array<infer U>
  ? Array<DeepPartial<U>>
  : { [K in keyof T]?: DeepPartial<T[K]> };
```

As mentioned in the exercise introduction, we can recursively reference `DeepPartial` inside of itself.

To explain how the solution works, let's simplify it by removing the first aspect of the conditional check:

```tsx
type DeepPartial<T> = { [K in keyof T]?: DeepPartial<T[K]>}; 
```

### Allowing Optional Properties and Recursive Calling

In the above, `DeepPartial<T[K]>` makes a recursive call with the value of the object being iterated over.

Note the inclusion of the `?` operator. Without it, we end up creating the object again.

Including the `?` allows us to essentially mark properties as optional.

Passing `MyType` into `DeepPartial` at this point shows us that types can be either what they originally were or `undefined`:

```tsx
// Hovering over Result

type Result = {
  a?: string | undefined;
  b?: number | undefined;
  c?: DeepPartial<{
    d: string;
    e: {
      f:string;
      g: {
        h: string;
        i: string;
      }[];
    };
  }> | undefined;
}
```

Note that we can now skip over letter keys:

```tsx
const result: Result = {
  c: {
    e: {
      g: [
        {
          h: "14123123"
        }
      ]
    }
  }
};
```

At this point it looks like it works, but TypeScript is yelling at us in our test, because our helper is slightly imprecise.

According to our test, we don't want to allow for members of the `g` array to be undefined.

### Handle the Array Case

We need to update the solution at this step to handle the case where `T` is an array. It should not be allowed to pass `undefined` to a member of the array.

To do this, we'll check to see if `T` extends `Array`, where the type `U` is inferred.

If this conditional passes, we'll say that `Array` should recursively call `DeepPartial<U>`.

```tsx
type DeepPartial<T> = T extends Array<infer U>
  ? Array<DeepPartial<U>>
  : { [K in keyof T]?: DeepPartial<T[K]> };
```

What this means is as it works through `MyType`, when it gets to `g` which is an array, infer the thing inside of the array then return a new array with `DeepPartial` applied to each member.

This won't allow `undefined` to be passed in. Inside, it has to be an object with `h` and `i` inside of it.

## Recap

While I'm sure there are some cases that this won't handle– for example, the `[K in keyof T]` would be a no-op for a string, number, or boolean– this solution works great for this challenge.

This solution has a bit of hardcore TypeScript syntax. It's dense, there's barely any space, and nothing can be deleted or removed from it without changing the outcome.

However, it does provide an illustration of the power of optional types, recursive types, and array inference.

Use Recursion and Mapped Types to Create a Type Helper

0:00 Let's take a look at the solution here. This solution is kind of interesting. What you can see is, first of all, DeepPartial itself is declared up there, and then it's used inside its declaration. Similar to JavaScript functions, we can actually reuse the type helper inside itself.

0:20 To show you how this is working, I'm actually going to delete this first aspect of the conditional check. DeepPartial here. What's going on is we're saying K in keyof T, assuming that this is an object, within calling DeepPartial on the keyed or the value of the object that we're iterating over, which is interesting.

0:43 If we were to remove this little modifier then, then what we'd end up with is we're just creating the object again. That's kind of intriguing. All this is doing then is it's basically just making this optional in here. We end up with A string undefined, B string undefined, C string undefined.

1:04 If we say const results is a result and let's say...Let's actually go down into the depths of this, because this does work recursively. What we're saying then is I don't need to provide a D inside here. I don't need to do any of that. I've got G inside here, which is the array too. Even inside the array, this actually works pretty well too.

1:27 We've got the blah, blah, blah. I don't need to provide all the aspects to the elements of the array too, so why is this now yelling at me? Surely, I'm done here, right? Well, there's one little wrinkle inside here, which is we don't want to allow passing inside G. We don't want to allow passing undefined here, which this type lets me do. It's slightly imprecise here.

1:54 Actually, we need to handle the case when T is an array. If you think about a T, because we're doing this DeepPartial thing, we basically go, OK, first of all, we call it on the outside object. Then we call it on TK. K is here. This is going to be the thing that we're accessing. We get to call on all of the values.

2:14 On this C, then on D obviously, then E. Then it gets called on G too. We need to handle the case where G is this. You shouldn't be able to pass undefined to a member of an array here. Let's do that. We're going to say T extends any array. In fact, I'm going to use this syntax.

2:38 Let's say an array of any. If it does, then what we're going to do is we're going to say array, and let's say...I think I might be able to pass T here, but that's imprecise because T actually represents the array here. What we want to be doing is we want to extract the thing that's inside the array and then pass that back to it.

3:04 In fact, maybe I can just return. Oh no, right, because what I want to be doing is extracting DeepPartial front. What we're going to do is say infer U inside here, and then say array is DeepPartial U.

3:22 What's going on there is we're saying if we get to G and we grab G, and we understand that it's an array, then we're going to infer the member of the array, the thing that's inside the array, and then return a new array with the DeepPartial inside it.

3:41 This is actually going to not allow undefined to be passed here, because the only thing we should be able to pass is an object with H and I inside it. Wow, intense.

3:54 We could go even further here if we had some other...I'm feeling in the back of my mind, in the depths of my heart that maybe there are some cases that this doesn't handle. For this example, this is perfectly fine because we're handling the arrays properly. We're handling the objects properly.

4:11 When we get to a value like, let's say, T is a string or a number, then technically, you can say K in keyof T except key of string is sort of never, basically. This is like a noop when it reaches a string, or a number, or a Boolean.

4:30 For our use case here, it does seem to be working perfectly fine. You now can't pass in undefined into this area, which is exactly what we wanted. I think we're pretty much done here.

4:44 This is extremely hardcore like, bit of TypeScript here. This is where TypeScript can get really, really tough, which is where you have an extremely dense set of syntax, which all is like pressures and all belongs there with almost no space whatsoever, like can't delete anything, can't remove anything.

5:07 Hopefully, this gives you a good idea of the power recursive types, also the power of this array inference, and the power of this optional type here too.

Construct a Deep Partial of an Object

0:00 In this exercise, we're going to be creating a deep partial type helper, which takes in a type here and returns a partial version of that type. In other words, all of the members of the objects are going to be undefined, and even works inside arrays and inside other objects too. This should work to any depth, basically. It should keep recursively going down and down.

0:28 thing that might help you here is thinking that, inside a type, you can reuse that type if you want to. You're probably going to need a conditional type here. We're going to be wanting to recursively call deep partial further and further down the tree as we go.

0:46 This one's going to be tricky conceptually to get your head around, but we're going to need a conditional type, probably going to need a partial type helper too. There is maybe one thing that you haven't seen before. Do check in the docs around map types for that. Best of luck.

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.



Learn to manipulate types for cleaner, maintainable code with over 50 hands-on exercises, from string manipulation to advanced unions and mapped types.

Type Transformations Workshop

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

Understanding how to transform types to other types is crucial because many problems in TypeScript come down to how to get one type to become another.

Type Transformations Workshop Welcome

Use a Utility Type to Extract a Function’s Return Type

Get the Return Type of a Function

Gabriel Vergnaud explains the typeof keyword and the type/value level.

Typeof Keyword, and Type Level

TypeScript gives us a powerful utility function that can extract the parameters from a function.

Use a Utility Type to Extract Function Parameters

Extract Function Parameters Into A Type

TypeScript can access the return value from within a Promise with a type helper.

It’s quite useful to be able to extract the awaited result of a Promise.

Use Utility Types To Extract a Promise's Result

Extract The Awaited Result of a Promise

With help from one of TypeScript’s most useful utility types, we can create a union type directly by extracting keys off of a runtime construct.

Create Unions from Objects Using Two Operators

Create a Union Type From an Object’s Keys

Creating types from types is one of the most powerful features of TypeScript

Creating Types from Types

The 'typeof' operator transforms a runtime construct into a type.

The 'typeof' Operator

The 'keyof' operator can be used to extract the keys of an object type.

The 'keyof' Operator

Built-in TypeScript utilities that assist with transforming types.

Utility Types

This lesson from the Beginner's Tutorial is a refresher on the Promise type.

Typing Promises and Async Requests

Inference Basics

It’s important to understand the terminology around unions. 

Learn three different types of union in this example: enums, unions, and discriminated unions.

Union Terminology Examples

Understand The Terminology Around Unions

Often we’ll need just a part of a union type. 

TypeScript has a utility type that can directly grab specific members of a discriminated union.

Extract From A Union Using a Utility Type

Extracting Members of a Discriminated Union

Sometimes, you need a union with just a small part omitted.

TypeScript has a useful utility type that can extract all but a specified part of a union!

Use a Utility Type to Remove a Single Member of a Union

Excluding Parts of a Discriminated Union

Discover the power of union types in TypeScript and how they handle different possibilities over time, creating a multiverse in your code.

The Power of Union Types in TypeScript

TypeScript gives you a way to a look up a type’s properties individually.

Use Indexed Access Types to Extract Object Properties

Extract Object Properties into Individual Types

At times, you may need to access a single key from each member of a discriminated union. TypeScript makes this much easier than it may seem!

Simple Syntax Used to Access Parts of a Discriminated Union

Extract the Discriminator from a Discriminated Union

TypeScript gives us an annotation that infers an object / array’s values as literals and makes them read-only.

The Annotation Used to Infer an Object's Values as Literal Types

Resolve an Object’s Values as Literal Types

TypeScript gives you a couple of different ways to pass a union to extract multiple members of another union.

Extract Specific Members From A Union with Indexed Access

Create a Union From an Object's Values

You’ll often need to get all of an object’s values. 

There is an operator in TypeScript that gives us an elegant solution to this problem.

Use Two Operators With Indexed Access to Get All of an Object's Values

Get All of an Object’s Values

We can also create unions out of arrays. 

There are ways in TypeScript to make a union from the entire array, or just some specified elements.

Methods Used to Create Unions out of Array Values

Create Unions out of Array Values

Union types help describe different possibilities for what a type can be.

Union Types

Discriminated unions are unions which contain a single key (the discriminator) to tell them apart.

Discriminated Unions

'as const' lets you specify a type as immutable and readonly, meaning its values get inferred as their literal type.

'as const' Operator

Indexed access types let you access a member of a type: an object value, array member, or class method.

Indexed Access Types

Unions and Indexing

Template literals allow us to be very specific with the types of strings we use throughout our applications.

Template Literal with Strings

Only Allow Specified String Patterns

Sometimes you’ll want to create a union based on strings that match a pattern. Template literals can combine with other TS features to make this a breeze!

Extracting String Pattern Matches with Template Literals

Extract Union Strings Matching a Pattern

Template literals in TypeScript have some very interesting properties. Here we’ll examine how they interact with unions.

Passing Unions Into Template Literals

Create a Union of Strings with All Possible Permutations of Two Unions

TypeScript allows for strings to be split on the type level. This is rather easy to accomplish using a certain method from `ts-toolbelt`.

Using S From ts-toolbelt to Split a String Into a Tuple

Splitting A String into a Tuple

Create an object whose keys are derived from a union of template literals with help from a utility type that just receives the union, and the desired type.

Use a Utility Type to Create An Object From A Union

Create an Object Whose Keys Are Derived From a Union

TypeScript has a number of useful type helpers that can manipulate string literals in various ways. 

Manipulate String Literals Using Type Helpers

Transform String Literals To Uppercase

Examine real-world use cases for template literals by going through Mattermost’s source code.

Template Literals in Mattermost

Template Literal types let you express dynamic strings in TypeScript,

Template Literal Types

Template Literals

Type Helpers allow us to create functions that can return other types. They are the basis for many of TypeScript’s core features.

Create Functions that Return Types

Introducing Type Helpers

A Maybe type helper can help you safely handle missing values in your code.

Let's create a Maybe type that can handle null and undefined

The Unconstrained Maybe Type Helper

Creating a Maybe Type Helper

Adding constraints to a type helper ensures type safety by limiting the types that can be passed as arguments to the type helper.

Use Constraints to Limit Type Parameters

Ensure Type Safety in a Type Helper

Type helpers support multiple type arguments, and it’s easier than you might think.

Add Support for Multiple Types in a Type Helper

Create a Reusable Type Helper

Type Helpers support default values, allowing for arguments to be optional.

Set a Default Type Value in a Type Helper

Optional Type Parameters in Type Helpers

Functions can be used as constraints for Type Helpers, but not all functions have the same shape for their arguments.

Support Function Type Constraints with Variable Arguments

Functions as Constraints for Type Helpers

Leverage an essential TypeScript concept to constrain types to anything but null or undefined.

Exclude null and undefined from the Maybe Type

Constraining Types for Anything but null or undefined

Using TypeScript’s built-in types allows you to add constraints when working with arrays.

Enforce a Minimum Array Length in a Type Helper

Constraining Type Helpers to Non-Empty Arrays

Explainer: Type Helpers in Redux

Type Helpers

Conditional types are powerful, and are where TypeScript becomes less about "annotations you add to your JS" and more like its own meta programming language.

Compare and Return Values with Extends and the Ternary Operator

Add Conditional Logic to a Type Helper

We need to handle cases where something undesirable is passed in to a conditional. We’ll do this with a union, nested ternaries, and a special type.

Prevent Unwanted Type Scenarios from Happening

Refine Conditional Logic in a Type Helper

Daniel Rosenwasser discusses how new features are added to TypeScript, using the example of conditional types inspired by Knockout.js.

How TypeScript Added Conditional Types

If you find yourself in some complex conditional logic, harness the power of infer.

Infer Elements Inside a Conditional with Infer

Introducing infer for Conditional Logic

infer can extract out all the members of the type arguments without needing to dive deep into the element itself to understand its structure.

Use infer with Generics to Extract Types from Arguments

Extract Type Arguments to Another Type Helper

In this exercise, you’ll use what you know about infer and template literals to get only a person’s last name from their full name.

Pattern Matching on Template Literals with Infer

Extract Parts of a String with a Template Literal

The benefits of using template literal types for expressing string requirements over regexes, as explained by TypeScript's program manager.

Template Literal Types Were Nearly Regexes

You may want to extract from a library function's return, but don't want to declare a type annotation for it. This is solved with infer and a conditional type.

Optionally Infer the Return Type of a Function

Extract the Result of an Async Function

Long ternary statements become difficult to read. Luckily, there’s an alternative way to write longer conditionals with some help from a built-in type.

Two Methods for Extracting the Result of Multiple Possible Functions

Extract the Result From Several Possible Function Shapes

There’s a gotcha when working with union and conditional types known as the Distributive Conditional Type. In this exercise, we'll find workarounds.

Using Generic Context to Avoid Distributive Conditional Types

Distributivity in Conditional Types

Conditional Types and Infer

TypeScript provides a powerful type useful for turning union types into objects.

Use Mapped Types to Create an Object from a Union

Map Over a Union to Create an Object

Mapped types aren’t just for unions. They can also be used on objects.

Map Over the Keys of an Object

Mapped Types with Objects

It can be useful to transform an object’s keys while you’re mapping them. You can do this in a mapped type without changing your original object!

Remapping Object Keys in a Mapped Type

Transforming Object Keys in Mapped Types

The ImportedDataState type in Excalidraw’s codebase is a great example of using a mapped types to support legacy types.

How Excalidraw uses Mapped Types to Save Lines of Code

You can selectively remap an object’s properties by pattern matching against a template literal.

Selective Remapping with Conditional Types and Template Literals

Conditionally Extract Properties from Object

TypeScript allows you to create new objects by mapping over discriminated unions to pull out only the data you need.

Two Techniques for Mapping a Discriminated Union to an Object

Map a Discriminated Union to an Object

Objects can be mapped into unions of tuples. This is useful for when you want to guarantee values and their order.

Create a Union of Tuples by Reindexing a Mapped Type

Map an Object to a Union of Tuples

Mapped types allow you to do any type transformation you want. This time, we’ll transform an object to a union of template literals.

Map an Object to a Union of Template Literals

Transform an Object into a Union of Template Literals

Use the key remapping technique to transform a discriminated union into a union

Iteratively Map and Remap to Transform Types

Transform a Discriminated Union into a Union

Mapped Types in TypeScript let you dynamically create objects from other types.

Mapped Types

Combine techniques from previous exercises to extract dynamic parameters from a path.

Extract from String with Mapped Types, Template Literals, and infer.

Transform Path Parameters from Strings to Objects

Discriminated unions are useful when dealing with form handling. With a few transformation steps, we can create one from an existing object.

Create a Discriminated Union through Intermediary Transformations

Transform an Object into a Discriminated Union

Following an earlier challenge, here we revisit transforming a discriminated union with unique values into an object.

Transcript

Construct a Deep Partial of an Object

Transcript