Что такое yup?

Что такое Yup?

Yup — это популярная библиотека для валидации и парсинга (приведения к нужному формату) данных в JavaScript и TypeScript, особенно востребованная в экосистеме React для работы с формами. Она предоставляет декларативный, цепочечный (chainable) API для создания схем валидации, которые затем используются для проверки объектов (чаще всего — данных формы) на соответствие заданным правилам.

По своей сути Yup — это схема валидатора (schema validator). Вы описываете, как должны выглядеть ваши данные (их тип, обязательность, диапазоны, форматы), а Yup проверяет, соответствуют ли им реальные данные, и при необходимости преобразует их.

Ключевые особенности и преимущества

• Декларативный и читаемый синтаксис: Правила валидации записываются в виде цепочки методов, что делает код интуитивно понятным.
• Богатый набор встроенных валидаторов: Поддерживаются проверки на тип (string, number, date, object, array), обязательность (required), длину (min, max), форматы (email, url), диапазоны значений и многое другое.
• Кастомизация: Легко добавлять собственные правила с помощью метода .test().
• Асинхронная валидация: Поддерживает асинхронные проверки (например, запрос к серверу на уникальность логина).
• Преобразование данных (парсинг и кастинг): Может автоматически приводить входящие данные к нужному типу (например, строку "10" к числу 10) или преобразовывать структуру перед валидацией.
• Интеграция с Formik: Является де-факто стандартным решением для валидации в библиотеке управления формами Formik, хотя отлично работает и самостоятельно, и с другими библиотеками (React Hook Form, Final Form).
• Строгая типизация для TypeScript: Отличная поддержка TypeScript, которая помогает предотвратить множество ошибок на этапе разработки.

Базовый пример использования

Вот простейший пример схемы для валидации данных пользователя:

import * as yup from 'yup';

// 1. Создаем схему валидации
const userSchema = yup.object({
  name: yup
    .string()
    .required('Имя обязательно для заполнения')
    .min(2, 'Имя должно содержать минимум 2 символа'),
  email: yup
    .string()
    .required('Email обязателен')
    .email('Введите корректный email'),
  age: yup
    .number()
    .positive('Возраст должен быть положительным числом')
    .integer('Введите целое число')
    .min(18, 'Возраст должен быть не менее 18 лет'),
  website: yup.string().url('Введите корректный URL').nullable(),
  tags: yup.array().of(yup.string()).min(1, 'Выберите хотя бы один тег'),
});

// 2. Используем схему для валидации данных
const userData = {
  name: 'Анна',
  email: 'anna@example.com',
  age: 25,
  website: null,
  tags: ['react', 'frontend'],
};

// Синхронная валидация
try {
  const validatedData = userSchema.validateSync(userData);
  console.log('Данные валидны:', validatedData);
} catch (error) {
  console.log('Ошибка валидации:', error.message);
}

// Асинхронная валидация (возвращает Promise)
userSchema
  .validate(userData, { abortEarly: false }) // abortEarly: false - проверить все поля, а не останавливаться на первой ошибке
  .then((validData) => console.log('Успех:', validData))
  .catch((errors) => console.log('Все ошибки:', errors.errors));

Сравнение с аналогами (например, Zod)

Yup часто сравнивают с другой современной библиотекой — Zod. Вот ключевые отличия:

• История и распространенность: Yup появился раньше и шире используется, особенно в связке с Formik. Zod — более молодой, но быстро растущий проект.
• TypeScript: Zod изначально создавался с фокусом на TypeScript и предоставляет мощный вывод типов на основе схем, что позволяет автоматически генерировать TypeScript-интерфейсы. Yup также имеет хорошую поддержку TS, но подход Zod здесь считается более элегантным.
• Парсинг против валидации: Философия Zod — "парсинг" (данные либо проходят проверку и преобразуются к ожидаемому типу, либо вы получаете понятную ошибку). Yup также умеет преобразовывать данные, но его основная известность — именно валидация.
• Безопасность от XSS: Zod по умолчанию предоставляет дополнительную защиту.
• Синтаксис: Синтаксис обеих библиотек интуитивен и построен на цепочках методов. Различия минимальны.

Основные методы API Yup

• Создание схем: yup.string(), yup.number(), yup.date(), yup.boolean(), yup.array(), yup.object().
• Правила валидации:

    *   `.required(message?)` — обязательное поле.
    *   `.min(value, message?)` / `.max(value, message?)` — минимальное/максимальное значение или длина.
    *   `.email(message?)` / `.url(message?)` — проверка формата.
    *   `.matches(regex, message?)` — соответствие регулярному выражению.
    *   `.oneOf(array, message?)` — значение должно быть одним из списка.
    *   `.test(name, message, testFunction)` — пользовательская проверка.

• Преобразование:

    *   `.default(value)` — значение по умолчанию.
    *   `.transform((currentValue, originalValue) => transformedValue)` — пользовательское преобразование.

• Валидация:

    *   `.validateSync(value, options?)` — синхронная проверка.
    *   `.validate(value, options?)` — асинхронная проверка (возвращает Promise).
    *   `.cast(value, options?)` — преобразовать данные по схеме без валидации.
    *   `.isValid(value, options?)` — возвращает Promise с булевым результатом.

Заключение

Yup — это мощный, гибкий и удобный инструмент для обеспечения целостности данных на клиентской стороне. Его сила в простоте, читаемости и отличной интеграции с React-(особенно Formik). Если ваш проект уже использует Formik или вам нужна проверенная, стабильная библиотека с богатым функционалом для валидации форм — Yup является отличным выбором. Для новых проектов, особенно с акцентом на TypeScript, также стоит рассмотреть Zod как современную альтернативу с некоторыми концептуальными преимуществами.