无法在打字稿中使用 Array.from 和 spread 语法将 FileList 转换为 Array

Question

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

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

错误是：

“没有重载与此调用匹配。重载 4 中的 1，'(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

出现错误的原因是filesine.target.files可能为 null，这可能会导致Array.from(e.target.files)错误输出，因此 TypeScript 会提示您为该场景提供后备方案。