¡Absolutamente! Zod es una librería increíble para la validación de esquemas y tipos en TypeScript/JavaScript, famosa por su simplicidad y excelente inferencia de tipos. Aquí tienes un “cheatsheet” completo y bien estructurado, diseñado para ser claro y conciso para una IA conversacional.


🛡️ Zod (zod) Cheatsheet Completo 🛡️

Zod es una librería de declaración y validación de esquemas (schema declaration and validation) centrada en la inferencia de tipos TypeScript. Te permite definir la forma de tus datos con una API concisa y robusta, y luego validar tus datos en tiempo de ejecución para asegurar que cumplen con esa forma.


1. 🌟 Conceptos Clave


2. 🛠️ Configuración Inicial

  1. Instalación:
    npm install zod
    # o
    yarn add zod
  2. Importación:
    import { z } from 'zod';

3. 🧩 Tipos de Esquemas Básicos

Aquí están los tipos de esquemas más comunes que puedes definir con Zod:

3.1. Primitivos

3.2. Combinadores (Composers)

3.3. Modificadores de Opcionalidad


4. 🚀 Validación (Parsing)

4.1. schema.parse(data)

4.2. schema.safeParse(data)

4.3. Acceso a Errores (ZodError)

Cuando ocurre un error, error.errors es un array de objetos con detalles del error:

[
  {
    "code": "invalid_type",
    "expected": "number",
    "received": "nan",
    "path": ["age"],
    "message": "Expected number, received nan"
  },
  {
    "code": "too_small",
    "minimum": 1,
    "type": "string",
    "inclusive": true,
    "exact": false,
    "message": "String must contain at least 1 character(s)",
    "path": ["name"]
  }
]

5. ↔️ Transformaciones (.transform(), .preprocess())


6. ✍️ Refinamientos (.refine(), .superRefine())

Para validaciones personalizadas que no pueden ser expresadas con los métodos estándar.


7. 🤝 Valores por Defecto (.default())


8. 🎯 Inferencia de Tipos

Una de las características más potentes de Zod. Obtén los tipos TypeScript de tus esquemas.

import { z } from 'zod';

const productSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(3),
  price: z.number().positive(),
  category: z.enum(["electronics", "books", "food"]),
});

// Inferir el tipo de TypeScript a partir del esquema
type Product = z.infer<typeof productSchema>;

// Product ahora es:
// {
//   id: string;
//   name: string;
//   price: number;
//   category: "electronics" | "books" | "food";
// }

// Inferir el tipo de entrada (antes de transformaciones, si las hay)
type ProductInput = z.input<typeof productSchema>;

// Inferir el tipo de salida (después de transformaciones)
type ProductOutput = z.output<typeof productSchema>;

9. 🌐 Integración con React Hook Form (Mención)

React Hook Form se integra perfectamente con Zod usando @hookform/resolvers/zod.

npm install @hookform/resolvers
// En tu componente de formulario con React Hook Form
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const loginSchema = z.object({
  username: z.string().min(3, "Usuario debe tener al menos 3 caracteres"),
  password: z.string().min(6, "Contraseña debe tener al menos 6 caracteres"),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(loginSchema), // Aquí se integra Zod
  });

  const onSubmit = (data) =&gt; console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username")} />
      {errors.username && <p>{errors.username.message}</p>}

      <input type="password" {...register("password")} />
      {errors.password && <p>{errors.password.message}</p>}

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

10. 💡 Buenas Prácticas y Consejos


Este cheatsheet proporciona una visión completa de Zod, cubriendo sus características más importantes y cómo utilizarlas de manera efectiva en tus proyectos.