Question

我尝试了几种不同的方法来过滤FileList，而不会出现任何打字稿类型错误。我已经将其与简单的for-loop一起使用。但是凭借箭头功能的强大功能，它与带有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，但是您不能这样做，因为它们是两种不同的类型，并且不会彼此继承。

您需要像在for循环中一样将File[]保存到新变量中。

onDrop(evt: DragEvent) {
  let files: FileList = evt.dataTransfer.files;

  const filteredFileList: File[] = [...files].filter((file: File) => file.type === 'text/csv');
}

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

如何扩展DOM FileList类型，以便可以进行数组过滤？

1 个答案: