And now for something completely different.

In this exercise, we'll be looking at techniques how to refactor working code to remove duplication.

Here we have schemas for `User`, `Post`, and `Comment`:

```typescript
const User = z.object({
  id: z.string().uuid(),
  name: z.string(),
});

const Post = z.object({
  id: z.string().uuid(),
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: z.string().uuid(),
  text: z.string(),
});
```

Notice that `id` is present in each.

Zod provides us with various ways of composing objects together into different types, allowing us to DRY out our code.

## Challenge

Your challenge is to use Zod to refactor the above code to remove the `id` duplication while still having the tests pass.

### About the Test Case Syntax

You don't have to worry about the TypeScript syntax in the test cases for this exercise, but here's a quick explanation of what's going on:

```typescript
Expect<
  Equal<z.infer<typeof Comment>, { id: string; text: string }>
>
```

In the above line, `Equal` is ensuring that `zinfer<typeof Comment>` and `{id: string; text: string}` are of the same type.

If you remove the `id` from the `Comment` schema, VS Code will draw a red squiggle below the `Expect` line because type false does not satisfy the constraint true.

Once again, there are a bunch ways that this code could be refactored.

For reference, here's what we started with:

```typescript
const User = z.object({
  id: z.string().uuid(),
  name: z.string(),
});

const Post = z.object({
  id: z.string().uuid(),
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: z.string().uuid(),
  text: z.string(),
});
```

## The Simple solution

The simplest solution is to strip out the `id` into its own type. From there, each of the `z.object`s could reference it:

```typescript
const Id = z.string().uuid();

const User = z.object({
  id: Id,
  name: z.string(),
});

const Post = z.object({
  id: Id,
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: Id,
  text: z.string(),
});
```

This is pretty good, but `id: ID` is still being repeated. All of the cases are still passing, so that's okay.

## Use the Extend Method

Another solution would be to create a base object which we'll call `ObjectWithId`. This base object will contain our `id`:

```typescript
const ObjectWithId = z.object({
  id: z.string().uuid(),
});
```

From there, we can use the <a href="https://zod.dev/?id=extend" target="_blank" rel="noopener">extend method</a> to create new schemas that add on to the base object:

```typescript
const ObjectWithId = z.object({
  id: z.string().uuid(),
});

const User = ObjectWithId.extend({
  name: z.string(),
});

const Post = ObjectWithId.extend({
  title: z.string(),
  body: z.string(),
});

const Comment = ObjectWithId.extend({
  text: z.string(),
});
```

Note that `.extend()` will overwrite fields!

## Use the Merge Method

Similar to the above solution, we could use the <a href="https://zod.dev/?id=merge" target="_blank" rel="noopener">merge method</a> to extend the `ObjectWithId` base object:

```typescript
const User = ObjectWithId.merge(
  z.object({
    name: z.string(),
  }),
);
```

Using `.merge()` is slightly more verbose than `.extend()`. We have to pass in a `z.object()` that contains the name `z.string()`.

Merging is generally used when two different types are being combined, rather than just extending a single type.



Those are a few different ways that you can compose objects together in Zod to reduce the amount of code duplication, make things more DRY, and make things a bit more maintainable!

Refactoring Duplicated Schemas

0:00 There are a bunch of possible solutions here. The simplest solution is to strip out the ID thing here into its own type and then reference that within all the other z.objects, which is pretty good but we're still getting this object id: Id thing here. All of our cases are passing. This is OK.

0:19 Another solution would be to create a base object here, which is an ObjectWithId and then use the .extend function. What extend does is it creates a new type with the initial stuff here and the stuff that you add here.

0:37 What we end up with is we've got this ObjectWithId. That's the base of all of these pieces. If we add something else here, like created At which could be z.date, then this would also be shared across of the objects. That, obviously, wasn't the ID because we're going to get a lot of errors, then.

0:56 Another way you could do this is by using merge here. Merge, what it means, is you take the base ObjectWithId and you merge it with another object. You can see that this is slightly more verbose than the other version, then just extend, because here we're we get to pass in an object containing the name z.string.

1:17 Inside here, we actually have to pass a z.object. We have to wrap it in Zod. What this means is you can use this more generally to merge two different types together instead of just extending from them.

1:29 Those are different ways that you can compose objects together in Zod to reduce the amount of code duplication, make things more dry, and make things a bit more maintainable.

Reduce Duplicated Code by Composing Schemas

0:00 This exercise is a little bit different from the others because it's a refactor exercise. We've got some user and post and comment thing down here. What this is doing is there's a lot of duplicated code here. This ID is duplicated a bunch of times. There are various things in Zod that help you compose objects together into different types.

0:22 I've got some cases down here. Don't worry about the complicated TypeScript syntax here. What it's basically doing is we've got z.infer here inside this equal. If I just break this out a little bit, what equal is doing is it's making sure that this and this are of the same type.

0:42 If I say, "Comment," if I just remove the ID there...Sorry. That was in user there. User, it's not equal, these two things. Type false does not satisfy the constraint true because it doesn't have the ID property anymore.

0:59 Consider these three things of comment, post, and user. These are like your guides to make sure that the objects still represent what I want them to represent. Of course, if you run the exercise, then it's going to run the type check. If they're not passing, then it's going to tell you. Your challenge is to try to use some Zod APIs to make these objects a bit cleaner and a bit more dry.

TypeScript is great for checking variables at the type level.

For example, you can specify that the `age` property for a `User` should be a number.

However, you can’t always be sure what you’re going to get from a form input. TypeScript will present an error if it’s not a number, but on its own it doesn’t know if a number is too low or too high to be realistic for your use case.

There’s a similar problem with third-party API responses.

You can reference documentation to get an idea for what a response includes, but TypeScript can’t tell how to type it. And what happens if you get an error instead?

Zod allows you to work around uncertainty by checking types at the _runtime_ level as well at the type level.

In this tutorial, you’ll gain hands-on practice with Zod by working through a series of exercises that demonstrate how useful runtime checking is.

## **What is Zod?**

Zod ([github](https://github.com/colinhacks/zod#introduction)) is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple **`string`** to a complex nested object.

Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator _once_ and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

## **Instructions**

This tutorial is a set of problem exercises for you to work through. Each exercise has a short video that presents the problem along with a code editor to solve the problem in the browser.

You'll know you've solved the exercise when the tests pass.

This Zod tutorial encourages **active, exploratory learning**. In each exercise, I'll explain a problem, and **you'll be asked to try to find a solution**.

To attempt a solution, you'll need to:

1. Look for any 🕵️‍♂️ emojis to give you a hint on what to change
2. Check out <a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener">Zod's docs</a>
3. Try to find something that looks relevant.
4. Give it a go to see if it solves the problem.

You'll know if you've succeeded because the tests will pass.

**If you succeed**, or **if you get stuck**, watch the solution video and check out the **`*.solution.ts`**.

You can see if your solution is better or worse than mine!

### **Prerequisites**

You'll need a working understanding of JavaScript, but even if you are new to TypeScript this tutorial is for you.

### **Running the Exercises Locally**

You'll want to have an understanding of git to clone the repository, basic node and npm (yarn) , as well as TypeScript itself to work through this tutorial.

If you want to save your work or work in a different environment, you can also [clone the git repository](https://github.com/total-typescript/zod-tutorial) and work locally in the editor of your choice. If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/zod-tutorial), you can work in a full VS Code coding environment running in your browser.

Follow the instructions in the [README](https://github.com/total-typescript/zod-tutorial/blob/main/README.md) to get the exercises running.

Zod is a TypeScript-first schema declaration and validation library. In this tutorial, Matt Pocock has prepared a set of exercises that will help you level up.

Transcript

Reduce Duplicated Code by Composing Schemas

Transcript