Zod — это TypeScript библиотека для валидации и создания схем данных, позволяющая определять строгие типы на этапе разработки. Она значительно упрощает управление типами и обеспечивает безопасность данных в приложениях. В отличие от других решений для валидации данных, Zod написан на TypeScript и позволяет использовать строгую типизацию как на этапе компиляции, так и на этапе выполнения.

Для простых структур можно задать валидацию буквально в одной строке:

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email()
});

Одним из ключевых преимуществ является автоматическая генерация TypeScript типов из схем Zod. Это избавляет от необходимости дублировать логику валидации и типизацию данных:

const user = userSchema.parse({
  name: "Aleksandr",
  age: 31,
  email: "aleksandr@google.com"
});

type User = z.infer<typeof userSchema>; // { name: string, age: number, email: string }

Zod также поддерживает продвинутые методы валидации: асинхронную валидацию, пользовательские валидаторы и возможность задавать условия на основании других значений в объекте:

const passwordSchema = z.string().min(8).max(20);
const customSchema = z.object({
  password: passwordSchema,
  confirmPassword: z.string().refine(
    (value, context) => value === context.parent.password,
    { message: "Пароли должны совпадать" }
  )
});

Композируемость. В Zod схемы можно легко комбинировать и расширять:

const baseUserSchema = z.object({
  name: z.string(),
  age: z.number().min(18),
});

const adminSchema = baseUserSchema.extend({
  isAdmin: z.boolean(),
});

Теперь, когда мы вспомнили/познакомились с основами работы с Zod, можно перейти к неочевидным и полезным вариантам использования.

? Валидация данных с API. Zod идеально подходит для валидации данных, полученных с внешних API. Это помогает избежать ошибок при работе с неподтвержденными данными, особенно если API меняет свою структуру.

const apiResponseSchema = z.object({
  data: z.array(z.object({
    id: z.number(),
    title: z.string(),
  }))
});

fetch("/api/posts")
  .then(response => response.json())
  .then(data => {
    const result = apiResponseSchema.safeParse(data);
    if (!result.success) {
      console.error("Ошибка. Неподдерживаемый тип response: ", result.error);
    }
  });

? Конфигурации приложений. Zod можно использовать для строгой валидации конфигурационных файлов (например, .env). Это гарантирует корректность настроек на разных окружениях и помогает находить ошибки до запуска приложения:

const configSchema = z.object({
  PORT: z.string().regex(/^\d+$/).transform(Number),
  DATABASE_URL: z.string().url(),
});

const config = configSchema.parse(process.env);

? Валидация сложных форм. Скорее всего, вы это уже использовали, но если для кого то в новинку, то будет крайне полезно. В комбинации с React или другими библиотеками Zod помогает создавать более надежные интерфейсы с минимальными усилиями:

const formDataSchema = z.object({
  fields: z.array(z.object({
    label: z.string(),
    value: z.union([z.string(), z.number()]),
  }))
});

А какие кейсы вы встречали, где можно бы было применить Zod и улучшить приложение?
Буду рад узнать и обсудить другие варианты применения библиотеки.

Больше о фронтенде, технологиях и новостях в мире JS в моемТГК — aleksandr_frontend

Комментарии (6)


  1. KReal
    03.11.2024 14:01

    Звучит хорошо, звучит интересно. Но не нашёл ссылки на гитхаб)


    1. atomr_mf Автор
      03.11.2024 14:01

      Вы имеете ввиду репозиторий с этими же примерами?) При написании статьи думал, что конкретных кусочков кода, которые должны навести на мысль как и где применить в своих проектах, должно хватить. В каждом проекте своя архитектура. Но скорее всего, вы правы, для полноты картины можно было этот код оформить в гите.

      На будущее учту, спасибо)


      1. KReal
        03.11.2024 14:01

        Ну, я имел в виду, скорее, ссылку на то место, где можно ознакомиться с документацией и скачать что-то)


    1. VanKrock
      03.11.2024 14:01

      так на сайте на главной странице справа вверху треугольничек со значком гитхаба. Или вы не про это?


      1. KReal
        03.11.2024 14:01

        Так а где ссылка на сайт?)


  1. glebsts
    03.11.2024 14:01

    Использовал в одном проекте, было все хорошо на простых формах, а потом мне понадобилась сложная форма, где дополнительный сет полей был опционален в зависимости от одного булевого поля, плюс валидность значений некоторых полей зависела от значений других (например, два datepicker, начало и конец, конец не может быть раньше начала). Долго пытался сделать, наткнулся на обсуждение каких-то ограничений в zod, и пересел на joi (joi.dev), который оказался более гибким.