Introduction to Zod: Data Validation with TypeScript

Welcome, typing adventurer! 🎩 TypeScript is amazing, isn't it? It helps us better structure our code by providing static typing and helps us avoid annoying bugs. But here's the catch: TypeScript checks types... only at compile time! 😬 Yes, once your code is running, there's no guarantee that data coming from external sources (APIs, users, etc.) will respect the expected structure. That's where Zod comes in to save the day! 🚀

In this article, we'll discover why and how to use Zod, a library that allows you to validate and type your data dynamically. From basic validation to more complex data structures, Zod gives you everything you need to secure your TypeScript data without compromise. Let's go! 🎉

What is Zod? 🤔

Zod is a TypeScript schema validation library that checks your data in real-time. With Zod, you can create validation schemas for any type of object. Imagine an API that returns uncertain data: Zod allows you to verify on the fly that the received data matches the expected type.

Key Features of Zod 💪

• Simple and flexible: Its syntax is intuitive and expressive.
• Combined validation and typing: No need to juggle between separate types and validations, Zod handles it all!
• Instant feedback: You get detailed errors as soon as your data doesn't match the schema.
• Robust API: From simple validation to complex transformations, Zod offers a complete API.

Installing Zod 📦

To get started, simply install Zod via npm or yarn:

bash

Now that you're ready, let's dive into creating your first Zod schema!

Creating Basic Schemas with Zod 🎨

A Zod schema represents an expected data structure. Let's take a simple example where we want to validate a user with a name, age, and email address.

Example: Basic Validation

Here's how to define a Zod schema for a user 👤:

typescript

With this example, Zod will check if userInput respects the schema defined by userSchema. If everything is in order, parse returns the validated data. Otherwise, it throws an error with a detailed message about what's wrong. No surprises in production! 🎉

Conditional Types and Unions: Handling Multiple Cases 🔀

Zod also handles complex schemas using conditional types. Let's say you have a form where the user can be either a client or an administrator. Here's how to define this schema with Zod.

Example: Union Schema

typescript

In this example, Zod validates that adminUser is either a client or an admin with the required properties for each role. Pretty handy, right? 👌

Transformations: Validate and Transform at the Same Time 🔄

Sometimes you want to validate data and transform it at the same time. Zod makes this easy, like transforming a string into a number.

Example: Data Transformation

typescript

Here, Zod accepts a string ("49.99") and transforms it into a valid number.

Custom Validations 🛠️

Zod also allows you to create custom validations using the .refine() method. Let's say you want to validate a password with specific criteria, like minimum length and special characters.

Example: Password Validation

typescript

The .refine() method allows you to add a custom condition. Here, Zod checks that the password meets the defined criteria and provides specific error messages if it doesn't.

Why Choose Zod? 🌟

Zod has become essential for validation in TypeScript because it:

• Perfectly combines validation and typing without adding complexity.
• Offers a clear and intuitive API, even for complex schemas.
• Provides understandable and easy-to-debug errors.
• Integrates perfectly into TypeScript projects.

Summary

Zod adds an extra layer of security and reliability to TypeScript by validating received data dynamically. You can sleep soundly knowing your data is healthy and well-typed. So, ready to try Zod in your next project? 😎

1npm install zod
2# or
3yarn add zod
4# or
5pnpm add zod
6# or
7bun add zod

1import { z } from 'zod';
2
3// User schema
4const userSchema = z.object({
5  name: z.string(), // Name must be a string
6  age: z.number().int().min(18), // Age must be an integer, minimum 18
7  email: z.string().email(), // Must be a valid email
8});
9
10// Example input data
11const userInput = {
12  name: 'Alice',
13  age: 25,
14  email: 'alice@example.com',
15};
16
17// Data validation
18try {
19  const validUser = userSchema.parse(userInput); // Parse returns validated data
20  console.log('Valid user:', validUser);
21} catch (e) {
22  console.error('Validation error:', e.errors);
23}

1// Client schema
2const clientSchema = z.object({
3  role: z.literal('client'),
4  preferences: z.array(z.string()), // Array of preferences
5});
6
7// Administrator schema
8const adminSchema = z.object({
9  role: z.literal('admin'),
10  accessLevel: z.number().min(1).max(5), // Access level from 1 to 5
11});
12
13// Union of both schemas
14const userSchema = z.union([clientSchema, adminSchema]);
15
16// Example user
17const adminUser = {
18  role: 'admin',
19  accessLevel: 3,
20};
21
22// Validation
23try {
24  const validUser = userSchema.parse(adminUser);
25  console.log('Valid user:', validUser);
26} catch (e) {
27  console.error('Validation error:', e.errors);
28}

1const priceSchema = z.string().transform((val) => parseFloat(val));
2
3// Example input
4const priceInput = '49.99';
5
6// Validation and transformation
7const validPrice = priceSchema.parse(priceInput);
8console.log('Validated and transformed price:', validPrice); // 49.99 (number)

1const passwordSchema = z
2  .string()
3  .min(8, { message: 'Password must be at least 8 characters long' })
4  .refine((val) => /[A-Z]/.test(val), {
5    message: 'Password must contain at least one uppercase letter',
6  })
7  .refine((val) => /[0-9]/.test(val), {
8    message: 'Password must contain at least one number',
9  });
10
11// Example input
12const passwordInput = 'Secure123';
13
14// Validation
15try {
16  const validPassword = passwordSchema.parse(passwordInput);
17  console.log('Valid password:', validPassword);
18} catch (e) {
19  console.error('Validation error:', e.errors);
20}