无法扩展打字稿文件

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 键；所有的斑点、名称等都消失了。如果我console.log file里面的toAcceptedFiles，我可以看到所有的键。

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

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

为什么扩展 File 会破坏它？

Answer 1

为什么第一种方法行不通

您的第二种方法更合理，因为本机 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;
}

无法扩展打字稿文件

Cannot extend typescript File

javascript

type-conversion

typescript

typescript-typings