Я использую 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 без дефолтных значений