Use deep partials to help with mocking an entity

Deep partials are incredibly useful. For very, very narrow use cases. For instance, if you're in a test file, writing a unit test or something, and you have an entity that you want to mock. Let's say it's a Post.


interface Post {
id: string
comments: { value: string }[]
meta: {
name: string
description: string
}
}

You don't really want to have to go in and manually fill out every field, including the comments array, every single time. Usually what you want to do is just provide just enough data to make the test run.

So what you can do there is you can use a deep partial for this.

Now, TypeScript does give you a Partial. But, if you were to wrap Post in just a Partial, you would still have to manually fill out all of the nested data since Partial only works one layer deep.


const post: Partial<Post> = {
id: "1",
meta: {
description: "123",
name: "123",
},
}

So a deep partial actually goes and makes every layer inside a Partial. So we don't have to provide a value to comments or meta for example.


const post: Partial<Post> = {
id: "1",
comments: [{}],
meta: {},
}

Again, this is very useful for very narrow use cases. Let's break down how it works. We have a DeepPartial that has a Thing. If Thing returns a function then we just return the Thing, because there's nothing to make partial there.

If our Thing extends an array and we infer the InferredArrayMember, then we use DeepPartialArray, which basically just calls DeepPartial on the thing inside it.

Otherwise, if Thing is an object, we use DeepPartialObject, which goes through each unrequired key in Thing and makes a DeepPartial of the value.


type DeepPartial<Thing> = Thing extends Function
? Thing
: Thing extends Array<infer InferredArrayMember>
? DeepPartialArray<InferredArrayMember>
: Thing extends object
? DeepPartialObject<Thing>
: Thing | undefined
interface DeepPartialArray<Thing> extends Array<DeepPartial<Thing>> {}
type DeepPartialObject<Thing> = {
[Key in keyof Thing]?: DeepPartial<Thing[Key]>
}

So you can see how it just recursively goes down and creates partials.

Transcript

0:01 DeepPartials are incredibly useful for very, very narrow use cases. For instance, if you're in a test file, let's say, you're writing a unit test or something, and you want to make a seed for something, you have an entity that you want to mock, basically, let's say, it's a post here, you don't really want to have to go into, say, comments, value, this, for instance, and have to mock out all of everything every single time.

0:28 Usually, what you want to do is just provide a little bit of it enough to make the test run, essentially. What you can do there is you can use a DeepPartial for this. Now, a DeepPartial, if you were to just wrap this in a partial, for instance, which is something that TypeScript gives you, then you would, for instance, have meta.

0:46 Let's say you wouldn't need to provide meta. Let's say that you do provide meta, then you still have to provide description and a name because the partial is only one level deep. It doesn't go deeper. A DeepPartial, as we've got there, it actually goes and makes everything inside it partial, too. Even in comments here, we don't have to provide this value here.

1:10 Again, this is very, very useful for very narrow use cases. Let's break down how this works. We have DeepPartial where we have a thing, essentially. And if that thing extends a function, then we just return the thing because there's nothing to make it partial there. If it extends an array, and we infer the inferred array member, then we use DeepPartial array, which, basically, just calls DeepPartial on the thing inside it.

1:35 Otherwise, if it's an object, then for each key of the thing, then we, first of all, make sure it's not required there. That's crucial. Then we call DeepPartial on that thing again. You can see how it just gets recursively partialed down until everything is there.

Deep partials are SUPER useful and not natively supported by TypeScript. Here, I use one to help with mocking an entity in a (imaginary) test file.

Discuss on Twitter

More Tips

Play Type Predicates

Type Predicates

1 min

Play TypeScript 5.1 Beta is OUT!

TypeScript 5.1 Beta is OUT!

2 mins

Play How to Name your Types

How to Name your Types

4 mins

Play Don't use return types, unless...

Don't use return types, unless...

4 mins

Play TypeScript 5.0 Beta Deep Dive

TypeScript 5.0 Beta Deep Dive

6 mins

Play Conform a Derived Type Without Losing Its Literal Values

Conform a Derived Type Without Losing Its Literal Values

1 min

Play Avoid unexpected behavior of React’s useState

Avoid unexpected behavior of React’s useState

1 min

Play Understand assignability in TypeScript

Understand assignability in TypeScript

2 mins

Play Compare function overloads and generics

Compare function overloads and generics

1 min

Play Use infer in combination with string literals to manipulate keys of objects

Use infer in combination with string literals to manipulate keys of objects

1 min

Play Access deeper parts of objects and arrays

Access deeper parts of objects and arrays

1 min

Play Ensure that all call sites must be given value

Ensure that all call sites must be given value

1 min

Play Understand how TypeScript infers literal types

Understand how TypeScript infers literal types

1 min

Play Get a TypeScript package ready for release to NPM in under 2 minutes

Get a TypeScript package ready for release to NPM in under 2 minutes

1 min

Play Use assertion functions inside classes

Use assertion functions inside classes

1 min

Play Assign local variables to default generic slots to dry up your code and improve performance

Assign local variables to default generic slots to dry up your code and improve performance

2 mins

Play Know when to use generics

Know when to use generics

2 mins

Play Map over a union type

Map over a union type

1 min

Play Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

1 min

Play Use generics to dynamically specify the number, and type, of arguments to functions

Use generics to dynamically specify the number, and type, of arguments to functions

1 min

Play Use 'declare global' to allow types to cross module boundaries

Use 'declare global' to allow types to cross module boundaries

2 mins

Play Turn a module into a type

Turn a module into a type

2 mins

Play Create autocomplete helper which allows for arbitrary values

Create autocomplete helper which allows for arbitrary values

2 mins

Play Throw detailed error messages for type checks

Throw detailed error messages for type checks

1 min

Play Create a 'key remover' function which can process any generic object

Create a 'key remover' function which can process any generic object

1 min

Play Use generics in React to make dynamic and flexible components

Use generics in React to make dynamic and flexible components

1 min

Play Create your own 'objectKeys' function using generics and the 'keyof' operator

Create your own 'objectKeys' function using generics and the 'keyof' operator

1 min

Play Write your own 'PropsFrom' helper to extract props from any React component

Write your own 'PropsFrom' helper to extract props from any React component

1 min

Play Use 'extends' keyword to narrow the value of a generic

Use 'extends' keyword to narrow the value of a generic

1 min

Play Use function overloads and generics to type a compose function

Use function overloads and generics to type a compose function

2 mins

Play Decode URL search params at the type level with ts-toolbelt

Decode URL search params at the type level with ts-toolbelt

2 mins

Play Use 'in' operator to transform a union to another union

Use 'in' operator to transform a union to another union

2 mins

Play Derive a union type from an object

Derive a union type from an object

2 mins