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)
glebsts
03.11.2024 14:01Использовал в одном проекте, было все хорошо на простых формах, а потом мне понадобилась сложная форма, где дополнительный сет полей был опционален в зависимости от одного булевого поля, плюс валидность значений некоторых полей зависела от значений других (например, два datepicker, начало и конец, конец не может быть раньше начала). Долго пытался сделать, наткнулся на обсуждение каких-то ограничений в zod, и пересел на joi (joi.dev), который оказался более гибким.
KReal
Звучит хорошо, звучит интересно. Но не нашёл ссылки на гитхаб)
atomr_mf Автор
Вы имеете ввиду репозиторий с этими же примерами?) При написании статьи думал, что конкретных кусочков кода, которые должны навести на мысль как и где применить в своих проектах, должно хватить. В каждом проекте своя архитектура. Но скорее всего, вы правы, для полноты картины можно было этот код оформить в гите.
На будущее учту, спасибо)
KReal
Ну, я имел в виду, скорее, ссылку на то место, где можно ознакомиться с документацией и скачать что-то)
VanKrock
так на сайте на главной странице справа вверху треугольничек со значком гитхаба. Или вы не про это?
KReal
Так а где ссылка на сайт?)