Exploring Zod: A Comprehensive Guide

Introduction

In the world of TypeScript, sometimes, the Typescript validations are not enough for us. In those situations, we want more control over the validations to make our code more robust. This is where Zod comes into the picture.

What is Zod?

Zod is a TypeScript-first schema declaration and validation library. It was created and developed by Vercel. It aims to make it easy for developers to define, validate and transform the data structures.

Getting Started With Zod

First, create a TypeScript project and then install Zod with npm by using the following command:

npm install zod

If you are using yarn, use the following command:

yarn add zod

If you are using pnpm, use the following command:

pnpm add zod

Also, make sure that you are using TypeScript 4.5+ and you enable strict mode in your tsconfig.json file.

// tsconfig.json
{
  // ...
  "compilerOptions": {
    // ...
    "strict": true
  }
}

Then, create a typescript file called index.ts and import the z object from the zod.

import { z } from 'zod';

This z helps you to define your schemas.

import { z } from 'zod';

const ageSchema = z.number();

ageSchema.parse(12); // it will works fine
ageSchema.parse('hello'); // this will throws an error from zod

For the ageSchema.parse('hello') method call, you will get an error from zod. It will look like this:

Error: [
{
"code": "invalid_type",
"expected": "number",
"received": "string",
"path": [],
"message": "Expected number, received string"
}
]

If you don't want Zod to throw an error, then use safeParse() instead of parse()

Deep Dive into Zod

In Zod, you can define the schemas for your data. Then, these schemas will do all the validation work for you. In Zod, there are a lot of primitive types available:

import { z } from 'zod';

// primitive types
z.number();
z.string();
z.bigint();
z.boolean();
z.date();
z.symbol();

// any types
z.any();
z.unknown();

// empty types
z.undefined();
z.null();
z.void();

// never type allows no value
z.never();

Now you may be thinking, I can also do this using TypeScript. What Zod can do more? You can also chain validator functions to enforce more strictness in your schemas:

import { z } from 'zod';

const nameSchema = z.string().max(5);
const emailSchema = z.email();
const emojiSchema = z.string().emoji();

After learning this much you must be like:

But I have more for you.

Real World Zod Use Case:

Let's say you want to build a User Register page. Here, you can use Zod to make the validation more strict. Example:

import { z } from 'zod';

const userSchema = z.object({
 firstName: z.string().nonempty(),
 lastName: z.string().optional(),
 email: z.string().email('Invalid email format').required('Email is required'),
 password: z.string().min(8, 'Password must be at least 8 characters').max(32).required()
});

// sample form data
const formData = {
 firstName: 'John',
 lastName: 'Doe',
 email: '[e-mail]',
 password: 'john123'
};

// validate form data against userSchema
try {
 const parseData = userSchema.parse(formData);
 console.log('Validation Successful: ', formData);
 // if data is valid, then proceed with register
} catch(error) {
 if(error instanceof ZodError) {
  console.error('Validation failed. Errors:', error.errors);
 } else {
  console.error('Unexpected error during validation:', error.message);
 }
}

Conclusion

Zod is a powerful and intuitive library that enhances the TypeScript development experience by providing a seamless way to make the code more robust. Head over to zod.dev for the official documentation, tutorials, and examples