Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также удивительную интеграцию с TypeScript! 🚀
Валидация данных - очень распространенная вещь как на фронт-энде с формами, так и на бэк-энде для обработки маршрутных записей, поскольку она гарантирует, что все отправленные данные имеют ожидаемый тип и формат, что позволяет избежать возможных ошибок.
Зная это, вы можете проверять данные более просто и вручную, выполняя собственные проверки и обработку. Однако действительно ли стоит внедрять ручную валидацию с нулевым итогом? Я считаю, что нет! 🤔
Открыть Github GistПоэтому существует несколько библиотек, которые помогают в этом процессе, предоставляя готовые и полезные функциональные возможности, которые очень часто встречаются в процессе валидации. Ниже приведены наиболее используемые из них:
Хотя я никогда не пользовался другими, моя любимая библиотека валидации - Zod, и я покажу вам, почему!
Zod - это библиотека TypeScript для валидации и траснформации, основанная на объявлениях схем, что означает, что вы можете определить структуру со всеми значениями, которые вы хотите проверить, и их соответствующие типы, от простых типов данных, таких как строка, до сложных структур данных.
Смотрите этот пример для валидации простого строкового формата:
import { z } from 'zod' // creating a schema for strings const mySchema = z.string() // parsing mySchema.parse('tuna') // => 'tuna' mySchema.parse(12) // => throws ZodError // "safe" parsing (doesn't throw error if validation fails) mySchema.safeParse('tuna') // => { success: true; data: 'tuna' } mySchema.safeParse(12) // => { success: false; error: ZodError }
Кроме того, Zod призван быть максимально удобным для разработчиков, обеспечивая очень простой опыт разработки.
Ориентация на TypeScript означает, что Zod может автоматически выводить типы из TypeScript, избегая дублирования деклараций типов. Посмотрите на определение схемы как объекта и на вывод, который Zod может выполнить для получения типизации этого объекта:
import { z } from 'zod' const userSchema = z.object({ username: z.string(), email: z.string().email(), }) userSchema.parse({ username: 'Bob', email: 'bob@example.com', }) // extract the inferred type type User = z.infer<typeof userSchema> // { username: string, email: string }
Помните, я также говорил о преобразовании данных? Одна из самых удивительных вещей в Zod заключается в том, что он может преобразовывать получаемые данные и возвращать их в другом формате. Взгляните на этот более полный пример:
import { z } from 'zod' const userSchema = z.object({ id: z.string().uuid(), avatar_url: z.string().url(), name: z.string().trim().min(3).toLowerCase(), username: z .string() .min(3) .regex(/^([a-z-]+)$/i) .transform((username) => `@${username}`), email: z.string().email(), password: z.string().min(6).max(18), created_at: z.coerce.date(), }) const userData = userSchema.parse({ id: 'abae30a9-7cc5-4c85-9c71-f592a9a2802f', avatar_url: 'https://app.com/avatar.png', name: 'John Doe', // transform string to lower case username: 'john-doe', // add @ in string start email: 'johndoe@example.com', password: '123456', created_at: '2023-05-01T11:28:00.335Z', // convert string to JavaScript Date })
В приведенном примере метод transform() использовался для манипулирования значением свойства и изменения формата или даже типа. Кроме того, свойство coerce использовалось для преобразования значения поля created_at в объект Date из JavaScript, то есть, если это поле получит значение, отличное от даты, Zod попытается преобразовать его в дату.
Еще одна причина, по которой я выбрал Zod в качестве основной библиотеки для валидации, заключается в том, что она очень проста и универсальна, и может быть интегрирована с другими библиотеками, такими как React Hook Form .
React Hook Form - это библиотека манипулирования формами в React, которая позволяет интегрироваться с другими библиотеками для создания валидации полей формы. Среди поддерживаемых библиотек Zod можно использовать через резольвер, который позволит осуществить интеграцию. См. пример:
import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { z } from 'zod' const userSchema = z.object({ name: z.string().trim().min(1, { message: 'Required' }), age: z.number().min(16).optional(), }) // { name: string, age: number | undefined } type User = z.infer<typeof userSchema> const App = () => { const { register, handleSubmit, formState: { errors }, } = useForm<User>({ resolver: zodResolver(userSchema), }) return ( <form onSubmit = {handleSubmit((d) => console.info(d))}> <input {...register('name')} /> {errors.name?.message && <p>{errors.name?.message}</p>} <input type="number" {...register('age', { valueAsNumber: true })} /> {errors.age?.message && <p>{errors.age?.message}</p>} <input type="submit" /> </form> ) }
Обратите внимание, что в объявлении userSchema поле age было задано как необязательное с помощью метода optional(), который сделал тип строкой или неопределенным. Кроме этого метода, существуют метод nullable(), который принимает нулевое значение, и метод nullish(), который принимает нулевые и неопределенные значения.
В этом посте я представил в более общем виде некоторые особенности и преимущества Zod, такие как сильная интеграция с TypeScript и способность преобразовывать данные, а также краткий пример интеграции с React Hook Form для валидации форм на фронт-энде.
Если вы хотите узнать все, что может предложить Zod, я настоятельно рекомендую прочитать документацию для более подробной информации.
Надеюсь, вам понравилось и до встречи в следующем посте!
05.05.2023 14:00
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
05.05.2023 11:59
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.
05.05.2023 11:57
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.
05.05.2023 09:26
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут вам настроить, как будет выглядеть ваш сайт Temple, и вы можете настроить его дизайн в зависимости от ваших потребностей в дополнение к более чем 15+...