Zod is also useful on the frontend.

In this example, we have a function called `validateFormInput`.

The `values` type is `unknown`, which is safe in this case because we only have a vague idea of the form's shape. In this case, we're collecting a `name` and `phoneNumber` as seen in the `Form` object schema:

```typescript
const Form = z.object({
  name: z.string(),
  phoneNumber: z.string(),
});

export const validateFormInput = (values: unknown) => {
  const parsedData = Form.parse(values);

  return parsedData;
};
```

In our code's current state, we have a failing test when a phone number is not included.

## Challenge

Because a phone number is not always required, find a way to update our `Form` so that it passes the validation test whether or not a `phoneNumber` string has been included.

The solution is really intuitive in this case!

By adding `.optional()` on to the end of our `phoneNumber` schema, our test will pass:

`const Form = z.object({ name: z.string(), phoneNumber: z.string().optional(), });`

What we are saying here is that `name` is a string, and `phoneNumber` is either a string or undefined.

We don't have to parse anything, making this a really nice way to set a property as optional.

Make Schemas Optional

Matt Pocock: 0:00 Luckily, Zod makes this really, really intuitive with .optional here. Now you can see inside the test that it is all working. What we end up with is a type that looks like...If we go `type FormType = z.infer typeof Form`, then what we get is `name` is now a string, but `phoneNumber` is now a string or undefined. You don't have to parse it, which is really, really nice. That's just a really simple addition you can add if you need a property to be optional.

Matt Pocock: 0:00 Let's now jump to another really great use case for Zod, which is validating form inputs in a front-end application. We've got this function called validateFormInput, where we genuinely don't know what the values are. We vaguely know their shape, but it's pretty safe to just add unknown here.

0:14 We're collecting a name and a phone number here, except there's a tricky part here. This is the problem I want you to solve, which is that we want to be able to...The phone number should be optional here. They don't need to parse the phone number. We can just accept name. We're always going to need a name, but we're not always going to need a phone number.

0:35 That means that they can parse in undefined, or they can parse in nothing at all. Here should validate correct input. We're actually getting an error here, inside these tests, because this should be valid but it's not, essentially. You've got to find out a way from Zod's API to make this z.string optional.

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

Make Schemas Optional

Transcript