使用react-hook-form+TypeScript时，如何更优格式化API输出类型？

针对你用react-hook-form结合TypeScript处理表单数据转API类型的场景，除了手动编写映射函数，还有几个更符合最佳实践的方案：

1. 利用react-hook-form内置的transform API #

react-hook-form允许在注册字段时直接配置转换逻辑，提交表单时自动得到格式化后的数据，无需额外映射函数。

示例代码： #

import { useForm } from "react-hook-form";

type TaskFormInputs = {
  taskType: string;
  title: string;
  start: string;
  notes: string;
  tags: string;
  durationSeconds: string;
  careRecipient: string;
};

const { register, handleSubmit } = useForm<TaskFormInputs>({
  defaultValues: {
    taskType: "",
    title: "",
    start: "",
    notes: "",
    tags: "",
    durationSeconds: "",
    careRecipient: "",
  },
});

const onSubmit = (formData: AnyTask) => {
  // 这里的formData已经是转换后的类型，直接发请求
  fetch("/api/tasks", {
    method: "POST",
    body: JSON.stringify(formData),
  });
};

// 注册字段时配置transform
return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("taskType")} />
    <input {...register("title")} />
    <input 
      {...register("start", {
        transform: (value) => formatDate(value)
      })} 
    />
    <input 
      {...register("durationSeconds", {
        transform: (value) => convertMinutesToSeconds(value)
      })} 
    />
    <textarea 
      {...register("notes", {
        transform: (value) => value === "" ? null : [value]
      })} 
    />
    <input 
      {...register("tags", {
        transform: (value) => value === "" ? null : [value]
      })} 
    />
    <input {...register("careRecipient")} />
    <button type="submit">提交</button>
  </form>
);

2. 结合Zod等Schema校验库实现类型转换+校验一体化 #

用Zod定义表单的校验规则和转换逻辑，通过@hookform/resolvers集成到react-hook-form中，既能自动推导TypeScript类型，又能同时完成数据校验与转换，是规模化项目的推荐方案。

示例代码： #

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// 定义Zod Schema，包含转换逻辑
const TaskFormSchema = z.object({
  taskType: z.string().nonempty(),
  title: z.string().nonempty(),
  start: z.string().nonempty().transform((val) => formatDate(val)),
  durationSeconds: z.string().nonempty().transform((val) => convertMinutesToSeconds(val)),
  notes: z.string().transform((val) => val === "" ? null : [val]),
  tags: z.string().transform((val) => val === "" ? null : [val]),
  careRecipient: z.string().nonempty(),
});

// 自动推导表单输入类型
type TaskFormInputs = z.infer<typeof TaskFormSchema>;

const { register, handleSubmit, formState: { errors } } = useForm<TaskFormInputs>({
  resolver: zodResolver(TaskFormSchema),
  defaultValues: {
    taskType: "",
    title: "",
    start: "",
    notes: "",
    tags: "",
    durationSeconds: "",
    careRecipient: "",
  },
});

const onSubmit = (formData: AnyTask) => {
  // formData已经是符合API要求的类型，直接发送请求
  fetch("/api/tasks", {
    method: "POST",
    body: JSON.stringify(formData),
  });
};

3. 封装自定义表单组件复用转换逻辑 #

如果多个表单需要重复相同的转换规则，可以将转换逻辑封装到自定义输入组件中，让组件内部处理数据格式转换，简化表单代码。

示例代码： #

import { UseFormRegisterReturn } from "react-hook-form";

// 自定义输入组件，支持传入转换函数
type TransformInputProps = {
  name: string;
  register: UseFormRegisterReturn;
  transform: (value: string) => any;
  label?: string;
};

const TransformInput = ({ name, register, transform, label }: TransformInputProps) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const transformedValue = transform(e.target.value);
    // 调用react-hook-form的onChange更新表单数据
    register.onChange({ target: { name, value: transformedValue } });
  };

  return (
    <div>
      {label && <label htmlFor={name}>{label}</label>}
      <input
        {...register}
        id={name}
        onChange={handleChange}
      />
    </div>
  );
};

// 使用自定义组件
<TransformInput
  name="notes"
  label="备注"
  register={register("notes")}
  transform={(val) => val === "" ? null : [val]}
/>

方案选择建议 #

• 简单场景：优先使用react-hook-form内置的transform API，轻量且无需额外依赖
• 需要校验+类型推导：选择Zod结合react-hook-form，兼顾类型安全与数据合法性校验
• 多表单复用转换逻辑：封装自定义组件，提升代码复用性

内容的提问来源于stack exchange，提问作者Ignacio García