TypeScript中FormData转对象后如何启用数据对象的属性自动补全

嘿，我太懂你遇到的这个烦恼了——把FormData转成普通对象后，TypeScript完全识别不了对象的具体属性，写代码时既没有自动补全，还容易写错字段名，排查起来特别麻烦。别慌，咱们通过定义明确的类型+类型断言就能轻松解决这个问题，下面一步步来给你演示怎么做：

第一步：先给表单数据定义明确的类型接口 #

首先，根据你的表单实际字段，定义一个能覆盖所有表单数据的TypeScript接口。比如你的表单里有邮箱、密码、确认密码，还有多选的acquisition字段，那咱们就这么写：

interface SignupFormData {
  email: string;
  password: string;
  confirmPassword: string;
  // 这里可以补充你表单里的其他字段，比如用户名之类的
  acquisition: string[];
}

这个接口就是告诉TypeScript，咱们最终的表单数据对象应该是什么结构。

第二步：优化FormData转对象的逻辑 #

原来的代码里，Object.fromEntries(formData.entries())返回的是一个非常宽泛的{ [key: string]: string | File }类型，TypeScript根本不知道里面有哪些具体属性。咱们现在给转换后的对象加上类型断言，同时处理好多选的acquisition字段：

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();

  const formData = new FormData(event.target as HTMLFormElement);
  // 先获取多选的acquisition所有选项值
  const acquisitionChannels = formData.getAll('acquisition') as string[];
  // 删掉formData里的acquisition字段，避免后面转对象时带出单个多余的值
  formData.delete('acquisition');
  
  // 把FormData转成对象后，断言为排除了acquisition的SignupFormData类型
  const entriesData = Object.fromEntries(formData.entries()) as Omit<SignupFormData, 'acquisition'>;

  // 最后组合成完整的、类型明确的表单数据对象
  const data: SignupFormData = {
    ...entriesData,
    acquisition: acquisitionChannels,
  };
  
  // 现在你试试输入data.，TypeScript就会自动弹出password、email这些属性啦！
  console.log(data.password);
  console.log(data.acquisition);
}

额外小技巧：封装通用转换函数（可选） #

如果你在项目里经常需要做FormData转类型化对象的操作，还可以封装一个通用函数，这样不用每次都重复写逻辑：

/**
 * 把FormData转成指定类型的对象，支持排除指定字段
 * @param formData 要转换的FormData实例
 * @param excludeKeys 需要排除的字段名数组
 * @returns 类型化的对象
 */
function formDataToTypedObject<T>(formData: FormData, excludeKeys: string[] = []): Omit<T, typeof excludeKeys[number]> {
  excludeKeys.forEach(key => formData.delete(key));
  return Object.fromEntries(formData.entries()) as Omit<T, typeof excludeKeys[number]>;
}

用的时候就更简洁了：

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  const formData = new FormData(event.target as HTMLFormElement);
  
  const acquisitionChannels = formData.getAll('acquisition') as string[];
  const entriesData = formDataToTypedObject<SignupFormData>(formData, ['acquisition']);
  
  const data: SignupFormData = {
    ...entriesData,
    acquisition: acquisitionChannels,
  };
  
  // 一样能享受自动补全的快乐😎
  console.log(data.confirmPassword);
}

这样处理之后，不仅能获得属性自动补全，TypeScript还会帮你做类型检查——比如你要是不小心写成data.passwrod（少了个o），编辑器会立刻报错，提前帮你避免低级错误。

备注：内容来源于stack exchange，提问作者효근이