Настройка типизации формы React Hook Form (≥ v7.44.0) + Zod с разными входными и выходными типами

Вот важная новость с фронта ИИ: EkaterinaSL 25 минут назад Настройка типизации формы React Hook Form (≥ v7. 0) + Zod с разными входными и выходными типами Сложный 2 мин 704 ReactJS * Туториал Работая с формой, часто нам нужно сделать так, чтобы на вход она принимала данные одного типа, а после валидации их тип меняетсяМоя форма состоит из полей, начальное значение которых - пустая строка, а после валидации - числоДавайте попробуем создать схему для такой формы и вывести из нее типconst EMPTY_NUMERIC = ''; const numericScheme = z. union(); type NumericValue = z.

infer; const requiredNumberWithRefine = numericScheme. refine( (val) => val ! == EMPTY_NUMERIC, { message: 'Это поле обязательно для заполнения', }, ); export const formSchema = z.

Технические детали

object({ amount: requiredNumberWithRefine, quantity: requiredNumberWithRefine, }); export type FormDataInfer = z. infer;Стандартный способ с infer не подойдет в таком случае, при попытке типизировать форму и задать начальные значения в хуке useForm посыпятся ошибки типизацииНачиная с v7. 0 (релиз) React Hook Form хук useForm стал выглядеть так useFormПоявился 3-ий дженерик TTransformedValues - он определяет выходные параметры формы, после их модификацииВ нашей ситуации мы можем сузить наш начальный тип NumericValue до number с помощью одного из методов - refine, transform, superRefine с pipe.

Мы уже используем refine в схеме requiredNumberWithRefine, он подходит, но приведу примеры c transform и superRefine+pipe*, если, например, вы захотите использовать контекст* если использовать только superRefine, тип не будет суженconst requiredNumberWithTransform = numericScheme. transform( (val: NumericValue, ctx: z. RefinementCtx) => { if (val === EMPTY_NUMERIC) { ctx.

addIssue({ code: 'custom', message: 'Это поле обязательно для заполнения', }); return z. NEVER; } return val; }, ); const requiredNumberWithSuperRefineAndPipe = numericScheme . superRefine((val, ctx) => { if (val === EMPTY_NUMERIC) { ctx.

Отраслевые последствия

addIssue({ code: 'custom', message: 'Это поле обязательно для заполнения', }); } }) . number());Далее выводим 2 отдельных типа FormDataInput и FormDataOutput с помощью дженериков z. output export type FormDataInput = z.

input; export type FormDataOutput = z.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.