Сегодня я хочу познакомить вас с библиотекой 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: '[email protected]', }) // 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: '[email protected]', 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, я настоятельно рекомендую прочитать документацию для более подробной информации.
Надеюсь, вам понравилось и до встречи в следующем посте!
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.