javascript - 如何在React Native中全局重新定义FormData TypeScript接口(interface)？

Question

当像这样在 React Native 中使用 FormData 进行简单的 append 时...

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

TypeScript 提示...

_{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)}

所以我能够像这样重新定义 FormData...( 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>;
}

这直接在我正在执行append的文件中效果很好。

如何在项目中全局定义它，以便它覆盖 FormData 的所有使用？

Answer 1

使用全局ambient module扩展 lib.dom.d.ts 中定义的 FormData 接口(interface)通过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;
  }
}