无法使用 Array.from 将 FileList 转换为数组并在打字稿中传播语法

Question

这一行 const files = Array.from(e.target.files); 在打字稿中产生错误。

我是打字稿的新手。看起来对象不是数组，但实际上是。我该怎么做才能解决这个问题？

错误是：

"没有与此调用匹配的重载。重载 1 of 4，'(iterable: Iterable | ArrayLike): File[]'，出现以下错误。 'FileList | null' 类型的参数不可分配给 'Iterable | ArrayLike' 类型的参数。类型 'null' 不可分配给类型 'Iterable | ArrayLike'。重载 2 of 4，'(arrayLike: ArrayLike): File[]'，出现以下错误。 'FileList | null' 类型的参数不可分配给 'ArrayLike' 类型的参数。类型 'null' 不可分配给类型 'ArrayLike'。"

代码如下：

import { ChangeEvent } from 'react';
import './styles.css';

export function App() {
  const handleFileLoad = function (e: ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files);
    // I want to use forEach here, so I attempt to convert it to an array.
  };

  return (
    <div>
      <input type="file" onChange={handleFileLoad} />
    </div>
  );
}

Answer 1

你可以使用

(e.target as HTMLInputElement).files

而不是使用

e.target

作为直接宾语

Answer 2

e.target.filesreturns一个FileList | null,可以了解一下FileListhere.

您可以看到您可以使用常规 for-loop:

遍历文件

for(let i = 0; i < files.length; i++) {
    const file = files[i]; // get single file from files array
    // do anything you want with the file
}

Answer 3

我找到了答案。这将完成工作：

const files = Array.from(e.target.files as ArrayLike<File>);

我们可以将 FileList 视为包含元素的 ArrayLike

出于某种原因，typescript 无法自行猜测。

Answer 4

出现错误的原因是 e.target.files 中的 files 可能为空，这可能导致 Array.from(e.target.files) 出错，所以 TypeScript 有点提示你为该场景提供 fall-back。

无法使用 Array.from 将 FileList 转换为数组并在打字稿中传播语法

Cannot convert FileList to Array using Array.from and spread syntax in typescript

javascript

arrays

types

file

typescript