如何扩展 DOM 文件列表类型，以便我可以数组过滤器

Question

我已经尝试了几种不同的方法来过滤我的文件列表，而不会收到任何打字稿类型错误。我已经让它与一个简单的 for 循环一起工作。但是借助箭头函数的强大功能，它是单行与带有 for 循环的情侣线。有人有什么建议吗？提前谢谢。请参阅下面，了解我到目前为止所尝试的内容。

onDrop(evt: DragEvent) {
  let files: FileList = evt.dataTransfer.files;
  // results in: Property 'item' is missing in type 'File[]' but required in type 'FileList'.ts(2741)
  files = Array.from(files).filter((file: File) => file.type === 'text/csv');

  // Type 'FileList' is not an array type.ts(2461)
  [...files].filter((file: File) => file.type === 'text/csv');
}

// no type errors
const filteredFileList = [];
for (let index = 0; index < files.length; index++) {
  const file: File = files[index];
  if (file.type === 'text/csv') {
    filteredFileList.push(file);
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

Answer 1

您的问题是您正在尝试将File[]设置为 FileList ，但您无法这样做，因为它们是两种不同的类型并且不会相互继承。

您需要将File[]保存到新变量，就像在 for 循环中所做的那样。

onDrop(evt: DragEvent) {
  let files: FileList = evt.dataTransfer.files;
  const filteredFileList: File[] = [...files].filter((file: File) => file.type === 'text/csv');
}

您需要将"dom.iterable"添加到libs列表中，并使用 es2015 或更高版本的目标，以支持使用 [...files] 将FileList转换为File[]。