Задать вопрос
@Andrey1302
FullStack Developer (React.js | Node.js | Nest.js)

Как безопасно использовать useWatch с обязательными вложенными объектами в Yup-схеме без указания значений по умолчанию?

Я использую react-hook-form вместе с yup для валидации и вывода типов через InferType. У меня в схеме есть обязательное поле-объект, но я не задаю значения по умолчанию при инициализации формы (например если это значение дропдауна и значения дропдауна приходят с сервера)

Когда я использую useWatch для отслеживания этого поля, TypeScript считает, что объект всегда определён (так как он required в схеме), но на практике он может быть undefined, пока пользователь не заполнит форму — и это приводит к ошибке во время выполнения.

Минимальный пример:
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm, useWatch } from 'react-hook-form';
import { InferType, object, string } from 'yup';

const Schema = object().shape({
  testField: object({
    id: string().required(),
  }).required('Test'),
});

type FormValues = InferType<typeof Schema>;

const Form = () => {
  const { control } = useForm<FormValues>({
    resolver: yupResolver(Schema),
  });

  // ✅ TypeScript думает, что это всегда { id: string }
  const testField = useWatch({ control, name: 'testField' });

  // ❌ Ошибка во время выполнения, если testField === undefined
  const a = testField.id;

  return <form></form>;
};


❓Как правильно и безопасно это реализовать?
Я не хочу вручную задавать значения по умолчанию для каждого обязательного поля.
Какой лучший способ типизировать и использовать useWatch, чтобы избежать ошибок во время выполнения и не терять преимущества строгой валидации через Yup?

Я ищу рекомендованный подход, который бы сочетал:

✅ строгую валидацию через Yup
✅ корректную типизацию через InferType
✅ безопасное использование useWatch без дефолтных значений
  • Вопрос задан
  • 23 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы