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

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 抱怨...

_{'{ uri: any; 类型的参数名称：字符串；类型：字符串； }' 不能分配给类型为 'string |斑点'。 对象字面量只能指定已知属性，而 'uri' 不存在于类型 '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 通过interface merging 扩展lib.dom.d.ts 中定义的FormData 接口：

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;
  }
}