In this example, we're still using the Star Wars API but this time we want _all_ of the people it returns.

The starting point is similar to what we saw previously, where the `StarWarsPeopleResults` variable is set to `z.unknown()`.

```typescript
const StarWarsPeopleResults = z.unknown();

export const fetchStarWarsPeople = async () => {
  const data = await fetch("https://swapi.dev/api/people/").then((res) =>
    res.json(),
  );

  const parsedData = StarWarsPeopleResults.parse(data);

  return parsedData.results;
};
```

Similar to before, adding `console.log(data)` to the fetch function shows us a lot of data even though we are only interested in getting an array of names.

If this was a TypeScript interface, it might look like:

```typescript
interface Results {
  results: {
    name: string;
  }[];
}
```

## Challenge

Update `StarWarsPeopleResults` to use an object schema that represents an array of `StarWarsPerson` objects.

Reference the previous lesson and the <a href="https://zod.dev/?id=arrays" target="_blank" rel="noopener">Arrays section of the Zod docs</a> for help.

The correct way to solve this challenge is to create an object that references other objects. In this case `StarWarsPeopleResults` will be a `z.object` that contains `results`.

For `results` we'll use `z.array` and provide it with our `StarWarsPerson` type. We don't have to repeat the `name: z.string()` part!

Here's the code before:

```typescript
const StarWarsPeopleResults = z.unknown();
```

And after:

```typescript
const StarWarsPeopleResults = z.object({
  results: z.array(StarWarsPerson),
});
```

If we `console.log` our `parsedData`, we get all of the names back as we'd expect.

Declaring arrays of objects like this is one of the most common uses for `z.array()`, especially when referencing types you already created.

Create an Array of Custom Types

Matt Pocock: 0:00 The correct way to represent this in Zod is with z.array. Now, what this does is we're basically creating an object which references another object, which is pretty cool. You can compose these together. I don't need to repeat all of this stuff inside my StarWarsPeopleResults.

0:16 What this means is the parsed data now looks like the interface that we declared before. We've got our results, which is name: string; and that returns properly. Again, we can console.log the parsed data. What's going to happen is that we get all of the names back, which is really, really nice.

0:35 You can use z.array in a few different ways, but this pretty basic method is what you need to know about z.array. It's really, really nice for declaring arrays of objects. Of course, if I wanted to, I could say z.object. I could declare this as z.string() if I wanted to. It takes any old object.

0:53 Of course, this is going to fail because we're actually getting back an array of objects there instead of an array of strings. Z.array allows you to parse anything to it that is something returned from a z. It's going to be...What does it take? Z.string?

1:10 I imagine it takes...Yeah, z.any, basically. You can even parse in z.any here, as well, which is a cool thing. That will allow any old thing to be parsed through. What we were getting here is we're grabbing StarWarsPerson and sticking it inside an array. That's working nicely.

Matt Pocock: 0:00 We've got a different problem this time. We're actually fetching from a different API endpoint on Swapi. We're not fetching all of the people. All of the people here, the way this looks is it's kind of like an interface. Let's say Results {. It's got results: . This is an array of objects. It's name: string; basically.

0:24 If we console.log this data that's coming back, you'll be able to see what's going on because, again, we've got some text down here to say expect StarWarsPeople to equal this. You can see there that inside the console.log here, there we go, there's an enormous amount of data in here, but it's inside a results object here.

0:43 There are some other keys, too, like the count, like the results here. We've got to find some way of representing an array inside Zod because we need to reuse this StarWarsPerson.

0:56 We've got our name. We can add eye color if we want to. This just isn't working at the moment because it's not parsing the data correctly and we're getting a type error here.

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

Create an Array of Custom Types

Transcript