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.

Zod Tutorial

Update the toString Function

Runtime Type Checking with Zod

Create an Object Schema

Verify Unknown APIs with an Object Schema

Create an Array of Custom Types

Use z.infer() to Extract a Type

Extract a Type from a Parser Object

Make Schemas Optional

Set a Default Value with Zod

Be Specific with Allowed Types

Complex Schema Validation

Refactoring Duplicated Schemas

Reduce Duplicated Code by Composing Schemas

Transform Data from Within a Schema

Zod Section

The <a href="https://zod.dev/?id=strings" target="_blank" rel="noopener">strings section of the Zod docs</a> includes several examples of validation helpers that can be used to make our tests pass.

Here's what the `Form` schema looks like now:

```typescript
const Form = z.object({
  name: z.string().min(1),
  phoneNumber: z.string().min(5).max(20).optional(),
  email: z.string().email(),
  website: z.string().url().optional(),
});
```

Name has `min(1)` added because we can't pass in an empty string.

Phone numbers are constrained with `min(5)` and `max(20)` while still being optional.

Zod also has built-in validators for email and urls, saving us from writing our own.

Note that we can't use `.optional().min()` because `min` doesn't exist on the optional types. This means we have to put `.optional()` at the end after other validations.

There are additional validation resources linked in the Zod docs.

Matt Pocock: 0:00 Our form schema looks quite a bit different now. We've go this name, which is `z.string().min`. We actually don't have a test for this, but what it means is you can't parse a string which is less than one character. You can't parses an empty string. Really useful.

0:17 We've also got this phoneNumber here where we say `z.string()`. The minimum length is 5 and the maximum length is 20, which is doing pretty well with our test down here. It's also still optional there, too.

0:28 We've got email, which is `z.string().email()`, so you now can't pass an invalid email there. We've also got website, which is `z.string().url`. Again, it's optional here.

0:38 One thing to note with optional is that you can't put it here because .min doesn't exist on the types there, which is a little bit janky, but it means that optional goes at the end after the validations. I think that's fine.

0:50 Now, that means all our tests are passing. As you can see, there are a bunch of these. I don't want to cover them all in depth because it would take a while. If you are having a common validation issue with Zod, then there's probably a helper function to help you out.

Transcript

Complex Schema Validation

Transcript