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

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

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

Введение

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

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

Открыть Github Gist

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

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

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

Почему в Python есть оператор &quot;pass&quot;?
Почему в Python есть оператор "pass"?

05.05.2023 14:00

Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.

Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом

05.05.2023 11:59

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря своим методам, они делают код очень простым для понимания и читабельным.

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы

05.05.2023 11:57

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний, то, не теряя времени, практикуйте наш бесплатный онлайн тест 1100+ JavaScript MCQs и развивайте свои навыки и знания.

Массив зависимостей в React
Массив зависимостей в React

05.05.2023 09:44

Все о массиве Dependency и его связи с useEffect.

Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий

05.05.2023 09:26

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут вам настроить, как будет выглядеть ваш сайт Temple, и вы можете настроить его дизайн в зависимости от ваших потребностей в дополнение к более чем 15+...