Another useful feature of Zod is manipulating data from an API response after parsing.

To see this in action, we're going back to our Star Wars example.

Recall that we created `StarWarsPeopleResults` with a `results` array of `StarWarsPerson` schemas.

When we get the `name` of a `StarWarsPerson` from the API, it's their full name.

What we want to do is add a transformation on `StarWarsPerson` itself

## Challenge

Your challenge is to take our base `StarWarsPerson` and add a transformation that will split the names on space to give us a `nameAsArray`.

The test shows what you're looking for:

```typescript
it("Should resolve the name and nameAsArray", async () => {
  expect((await fetchStarWarsPeople())[0]).toEqual({
    name: "Luke Skywalker",
    nameAsArray: ["Luke", "Skywalker"],
  });
});
```

This one's a bit more challenging, so check out <a href="https://zod.dev/?id=transform" target="_blank" rel="noopener">the transform docs</a> for some examples.

As a reminder, here's what StarWarsPerson looked like before the transformation:

```typescript
const StarWarsPerson = z.object({
  name: z.string()
});
```

## Adding the Transformation

When we parse the `name` in `.object()`, we're going to take the person we receive and transform it to add additional properties:

```typescript
const StarWarsPerson = z
  .object({
    name: z.string(),
  })
  .transform((person) => ({
    ...person,
    nameAsArray: person.name.split(" "),
  }));
```

Inside of the `.transform()`, `person` is the object from above that includes the `name`.

This is also where we add the `nameAsArray` property that satisfies the test.

All of this is taking place at the `StarWarsPerson` level instead of inside of the fetch function or elsewhere.

## Another Example

Zod's transform API works for any of its primitives.

For example, we can transform the name inside of the `z.object`:

```typescript
const StarWarsPerson = z
  .object({
    name: z.string().transform((name) => `Awesome ${name}`)
  }),
  ...
```

Now we'll end up with a `name` of `Awesome Luke Skywalker` and `nameAsArray` will be `['Awesome', 'Luke', 'Skywalker']`.



Transforms act at the lowest level, can be combined, and are just incredibly useful.

Transform Data from Within a Schema

Matt Pocock: 0:00 The big change we've made here is we've started using the transform API from Zod, which is super duper cool. What it does is it says when we parse this name, what we're going to do is take that person that we receive and then transform it. We can add new properties to it.

0:19 What we've got here is nameAsArray: person.name.split("-"). What this is doing is it's taking the name property that we parse here. Then, it's splitting it by space. What we end up with is an array of those persons' names. What we get...I'm just console.logging it down here, in the same way I did before.

0:39 We end up with an array of name 'Luke Skywalker' and nameAsArray 'Luke' "Skywalker'. It doesn't work for C-3P0 but it does work for Darth Vader, Leia Organa, Owen Lars, etc. I don't know who Owen Lars is.

0:52 This transform API, you can see it's actually working just at the StarWarsPerson level. This doesn't just work for objects. It can actually work for arrays, too, or work for any Zod primative. We can transform this and we can say...We've got the name. Let's just say we go Awesome and ${name}.

1:13 What this is going to do now is this is going to prepend Awesome onto all of the results. We've got Awesome Biggs Darklighter. Awesome Beru Whitesun Lars. Who are these people?

1:23 You get the idea. Transform is an incredibly useful API because it acts at the lowest level and allows you to...You can obviously do multiple transforms, as well, if you really want. It's an incredibly cool API.

0:00 We're going back to our fetch example for a minute here because we want to be able to do something interesting, which is, we want to take the base StarWarsPerson that we've got here, and then what we're going to do is fetch all of these people. We actually want to do some manipulation of the data after we've parsed it.

0:21 What we need here and what our tests are expecting, is that the first thing that comes out of this StarWarsPeople thing is going to be Luke Skywalker, and the name is already Luke Skywalker. If we refactor this slightly, let's say, const results equals this, and just grab this, and we're going to say, expect results to equal this.

0:45 Our tests are still going to fail in the same way, but it means that we can just console.log (results). What that's going to do is going to show us all of the data that's coming back here. What we're getting is Luke Skywalker, C-3PO, etc. We're getting a similar result to what we got earlier, which is the results are the z.array(StarWarsPerson).

1:04 We want to find a way on StarWarsPerson itself, transform it, so we can add a new property which is named as array which is the name split with the space here. This is a more challenging one, but it's such a cool and useful pattern that I couldn't help but include it.

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

Transform Data from Within a Schema

Transcript