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的结果只包含preview中的File键;所有的blob，名字等都消失了。如果我console.log file toAcceptedFiles，我可以看到所有密钥。

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

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

无法扩展typescript文件

1 个答案: