Introduccion a la Validacion con Zod

Lo que aprenderas en este tutorial

✓ Conceptos basicos de Zod
✓ Definicion de esquemas
✓ Validacion
✓ Inferencia de tipos
✓ Integracion con React Hook Form

Step 1: Configuracion

npm install zod

Step 2: Esquema basico

import { z } from 'zod';

// Tipos primitivos
const stringSchema = z.string();
const numberSchema = z.number();
const booleanSchema = z.boolean();

// Objeto
const userSchema = z.object({
  name: z.string().min(1, 'El nombre es obligatorio'),
  email: z.string().email('Ingresa un correo electronico valido'),
  age: z.number().int().positive().optional(),
});

// Inferir el tipo
type User = z.infer<typeof userSchema>;

Step 3: Validacion

// parse - lanza excepcion en caso de fallo
try {
  const user = userSchema.parse({
    name: 'Alice',
    email: 'alice@example.com'
  });
} catch (error) {
  if (error instanceof z.ZodError) {
    console.log(error.errors);
  }
}

// safeParse - retorna un objeto incluso en caso de fallo
const result = userSchema.safeParse(data);
if (result.success) {
  console.log(result.data);
} else {
  console.log(result.error.flatten());
}

Step 4: Esquemas avanzados

// Array
const tagsSchema = z.array(z.string()).min(1).max(5);

// Union
const statusSchema = z.enum(['active', 'inactive', 'pending']);

// Transformacion
const numberStringSchema = z.string().transform(val => parseInt(val, 10));

// Refinamiento
const passwordSchema = z.string()
  .min(8, 'Se requieren al menos 8 caracteres')
  .refine(val => /[A-Z]/.test(val), 'Debe incluir una letra mayuscula')
  .refine(val => /[0-9]/.test(val), 'Debe incluir un numero');

// Validacion condicional
const formSchema = z.object({
  password: z.string(),
  confirmPassword: z.string()
}).refine(data => data.password === data.confirmPassword, {
  message: 'Las contrasenas no coinciden',
  path: ['confirmPassword']
});

Step 5: Integracion con React Hook Form

npm install react-hook-form @hookform/resolvers

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, 'El nombre es obligatorio'),
  email: z.string().email('Ingresa un correo electronico valido'),
});

type FormData = z.infer<typeof schema>;

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema)
  });

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}

      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Enviar</button>
    </form>
  );
}

Step 6: Validacion de API

// Next.js API Route
import { z } from 'zod';

const createUserSchema = z.object({
  name: z.string(),
  email: z.string().email(),
});

export async function POST(request: Request) {
  const body = await request.json();
  const result = createUserSchema.safeParse(body);

  if (!result.success) {
    return Response.json(
      { errors: result.error.flatten() },
      { status: 400 }
    );
  }

  // result.data tiene seguridad de tipos
  const user = await createUser(result.data);
  return Response.json(user, { status: 201 });
}

Resumen

Zod integra inferencia de tipos y validacion, logrando validacion de entradas con seguridad de tipos en proyectos TypeScript.