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

Работая с формой, часто нам нужно сделать так, чтобы на вход она принимала данные одного типа, а после валидации их тип меняется

Моя форма состоит из полей, начальное значение которых - пустая строка, а после валидации - число

Давайте попробуем создать схему для такой формы и вывести из нее тип

const EMPTY_NUMERIC = '';

const numericScheme = z.union([z.number(), z.literal('')]);

type NumericValue = z.infer<typeof numericScheme>;

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

export const formSchema = z.object({
  amount: requiredNumberWithRefine,
  quantity: requiredNumberWithRefine,
});

export type FormDataInfer = z.infer<typeof formSchema>;

Стандартный способ с infer не подойдет в таком случае, при попытке типизировать форму и задать начальные значения в хуке useForm посыпятся ошибки типизации

Начиная с v7.44.0 (релиз) React Hook Form хук useForm стал выглядеть так

 useForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>

Появился 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: 'Это поле обязательно для заполнения',
      });
    }
  })
  .pipe(z.number());

Далее выводим 2 отдельных типа FormDataInput и FormDataOutput с помощью дженериков z.input и z.output

export type FormDataInput = z.input<typeof formSchema>;
export type FormDataOutput = z.output<typeof formSchema>;

Если мы посмотрим, какие типы получились, то увидим

Теперь типизируем defaultValues с помощью FormDataInput, используем эти дженерики в хуке useForm (если мы не добавим типы в дженерики явно, они будут выведены самостоятельно, но давайте сделаем это для наглядности), в хендлере onSubmit используем FormDataOutput

Выглядеть это будет так:

const defaultValues: FormDataInput = {
  amount: '',
  quantity: '',
};


const Form = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<FormDataInput, unknown, FormDataOutput>({
    resolver: zodResolver(formSchema),
    defaultValues,
  });

  const onSubmit = (data: FormDataOutput) => {
    saveData(data);
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      ...

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

推荐订阅源

Все публикации подряд на Хабре