无法扩展打字稿文件

Question

我正在创建一个拖放界面。在下降时，我得到了原生的File。我需要扩展这个接口并包含一些其他信息。

我的第一个方法是使用

interface AcceptedFile extends File {
   acl: Acl,
   disabled: boolean;
}

const toAcceptedFiles = (files: File[]): AcceptedFile[] => {
   return files.map(file => {
      return {
         ...file,
         acl: Acl.Public,
         disabled: false
      }
   });
}

然而，函数toAcceptedFiles的结果，只包含来自File的preview键；所有的斑点、名称等都消失了。如果我在toAcceptedFiles 中console.log file，我可以看到所有的键。

有趣的是，以下界面可以正常工作：

interface AcceptedFile {
   file: File,
   acl: Acl,
   disabled: boolean;
}

为什么扩展 File 会破坏它？

Answer 1

为什么第一种方法行不通 spread operator issues with property accessors (getters)

您的第二种方法更合理，因为本机 api 将返回给您一个 File[]，您希望将其映射到您的类型 AcceptedFile。

const toAcceptedFiles = (files: File[]): AcceptedFile[] => {
   return files.map(file => {
      return {
         file: file,
         acl: Acl.Public,
         disabled: false
      }
   });
}

当从本机 API 调用 toAcceptedFiles 时，它将填充 File[] 而不是 AcceptedFile[]。

interface AcceptedFile {
   file: File;
   acl: Acl,
   disabled: boolean;
}