DEV Community

Cover image for Exploring Zod: A Comprehensive Guide
Debajit Mallick
Debajit Mallick

Posted on

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


Enter fullscreen mode Exit fullscreen mode

If you are using yarn, use the following command:



yarn add zod


Enter fullscreen mode Exit fullscreen mode

If you are using pnpm, use the following command:



pnpm add zod


Enter fullscreen mode Exit fullscreen mode

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
  }
}


Enter fullscreen mode Exit fullscreen mode

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



import { z } from 'zod';


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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"
}
]


Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

After learning this much you must be like:

Wow Image
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: 'johndoe@gmail.com',
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);
}
}

Enter fullscreen mode Exit fullscreen mode




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

Top comments (0)