如何为TypeScript中的FormData对象指定接口限定的类型？

在TypeScript中，原生FormData类型无法直接与自定义接口绑定，但可以通过交叉类型定义+类型断言/类型守卫的方式，实现既保留FormData的原生方法，又受接口字段约束的类型。

1. 定义带接口约束的FormData类型 #

首先，通过交叉类型扩展FormData，让它的get方法返回对应接口字段的类型：

export interface IContactForm {
  company?: string;
  firstName: string;
}

// 泛型类型：将FormData与目标接口合并，约束get方法的返回值
type TypedFormData<T> = FormData & {
  get<K extends keyof T>(key: K): T[K] | null;
};

2. 约束sendData的参数类型 #

将sendData的参数定义为TypedFormData<IContactForm>，这样既要求参数是FormData实例，又能通过接口约束字段：

const sendData = (data: TypedFormData<IContactForm>) => {
  // TypeScript会推断get('firstName')返回string | null
  const firstName = data.get('firstName');
  // 因接口中firstName是必填项，可根据业务逻辑进一步处理（如断言为string）
  console.log(firstName?.trim());

  // company是可选字段，返回值为string | null | undefined
  const company = data.get('company');
};

3. 将普通FormData转为约束类型 #

创建FormData后，通过类型断言将其转为TypedFormData<IContactForm>：

const onFormSubmit = async (contactFormData: IContactForm) => {
  const formData = new FormData();
  for (const field in contactFormData) {
    formData.append(field, contactFormData[field]);
  }
  
  // 类型断言：告诉TypeScript当前FormData符合TypedFormData<IContactForm>
  sendData(formData as TypedFormData<IContactForm>);
};

4. （推荐）添加运行时校验（类型守卫） #

类型断言仅在编译时生效，为确保运行时FormData确实符合接口约束，可添加类型守卫函数做校验：

/**
 * 校验FormData是否符合目标接口的必填字段要求
 */
function isTypedFormData<T extends object>(
  formData: FormData,
  requiredFields: Array<keyof T>
): formData is TypedFormData<T> {
  return requiredFields.every(field => formData.has(field));
}

修改onFormSubmit，通过类型守卫校验后再调用sendData：

const onFormSubmit = async (contactFormData: IContactForm) => {
  const formData = new FormData();
  for (const field in contactFormData) {
    formData.append(field, contactFormData[field]);
  }
  
  // 校验必填字段是否存在，通过后TypeScript会自动推断类型
  if (isTypedFormData<IContactForm>(formData, ['firstName'])) {
    sendData(formData);
  } else {
    throw new Error('FormData缺少必填字段firstName');
  }
};

核心说明 #

• 交叉类型TypedFormData<T>并未修改FormData的运行时结构，仅在类型层面增强了get方法的类型提示；
• 类型守卫解决了类型断言“编译时信任但运行时无校验”的问题，确保数据符合接口要求；
• 该方案既保留了FormData的原生功能（如文件上传、与fetch/axios兼容），又通过接口约束了字段的存在性和类型。

内容的提问来源于stack exchange，提问作者DevOverflow