Зод: сила проверки и преобразования данных

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

Введение

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

Зная это, вы можете проверять данные более просто и вручную, выполняя собственные проверки и обработку. Однако действительно ли стоит внедрять ручную валидацию с нулевым итогом? Я считаю, что нет! 🤔

Поэтому существует несколько библиотек, которые помогают в этом процессе, предоставляя готовые и полезные функциональные возможности, которые очень часто встречаются в процессе валидации. Ниже приведены наиболее используемые из них:

• Yup
• Зод
• Суперструктура
• Джой
• Class Validator
• io-ts

Хотя я никогда не пользовался другими, моя любимая библиотека валидации - Zod, и я покажу вам, почему!

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

Еще одна причина, по которой я выбрал 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, я настоятельно рекомендую прочитать документацию для более подробной информации.

Надеюсь, вам понравилось и до встречи в следующем посте!