Vue.js + TS 对象在文件输入上可能为“null”

Question

我试图在文件输入上上传文件后捕获一个事件。

JS代码：

fileSelected(e: Event) {
    if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) {
        this.file = (<HTMLInputElement>e.target).files[0];
    }
}

我的文件变量被定义为空。我想选择文件的第一个元素，但出现错误：

对象可能为空

我找到了一个解决方案，您首先必须检查它是否不为空，但我在 if 语句本身上遇到了相同的错误。有任何想法吗？

Answer 1

这是因为 TypeScript 无法在您共享的代码中执行类型缩小。如果您 (1) 将它们分配给变量并 (2) 在逻辑中添加保护子句以强制执行非空值检查，那么应该可以解决问题：

fileSelected(e: Event) {
  const target = e.target as HTMLInputElement;
  const files = target.files;

  // Guard clause to catch cases where `files` or `files[0]` is falsy (null included)
  if (!files || !files[0])
    return;

  // At this point, both `files` and `files[0]` will be non-null
  // And `files` will have an inferred type of `FilesList` instead of `FilesList | null`
  this.file = files[0];
}