如何在 React Native 中全局重新定义 FormData TypeScript 接口？

Question

When doing a simple append with FormData in React Native like this...

const formData = new FormData();
formData.append('image-data', {
  uri: '/awesome-chat-app/ImagePicker/abb9-a435046e971c.jpg',
  name: 'image001.jpg',
  type: 'image/jpeg',
});

TypeScript complains...

_{Argument of type '{ uri: any; name: string; type: string; }' is not assignable to parameter of type 'string | Blob'. Object literal may only specify known properties, and 'uri' does not exist in type 'Blob'.ts(2345)}

So I was able to redefine FormData like this... ( hat tip )

interface FormDataValue {
  uri: string;
  name: string;
  type: string;
}

interface FormData {
  append(name: string, value: string | Blob | FormDataValue, fileName?: string): void;
  delete(name: string): void;
  get(name: string): FormDataEntryValue | null;
  getAll(name: string): FormDataEntryValue[];
  has(name: string): boolean;
  set(name: string, value: string | Blob | FormDataValue, fileName?: string): void;
}

declare let FormData: {
  prototype: FormData;
  new (form?: HTMLFormElement): FormData;
};

interface FormData {
  entries(): IterableIterator<[string, string | File]>;
  keys(): IterableIterator<string>;
  values(): IterableIterator<string | File>;
  [Symbol.iterator](): IterableIterator<string | File>;
}

This works great directly within the file I'm doing the append .

How do I define it globally in the project so it overrides all uses of FormData?

Answer 1

Use a global ambient module to extend the FormData interface defined in lib.dom.d.ts via interface merging :

declare global {
  interface FormDataValue {
    uri: string;
    name: string;
    type: string;
  }

  interface FormData {
    append(name: string, value: FormDataValue, fileName?: string): void;
    set(name: string, value: FormDataValue, fileName?: string): void;
  }
}