typescript - 参数类型 Event 不可分配给参数类型 Event & DragEvent

Question

我的 html 组件存在以下问题，在(change)="fileUpload($event)"它一直标记错误的行中：Argument type Event is not assignable to parameter type Event & DragEvent

  <input
    (change)="fileUpload($event)"
    [attr.data-cy]="'builder-sidebar-upload-file-button'"
    accept="image/x-png,image/gif,image/jpeg"
    type="file"
    multiple
  />

底层代码如下所示：

  fileUpload(e: Event & DragEvent): void {
    if (!this.builderService.activeDragData.getValue()) {
      this.fileIsSelectedFromBrowser(e);
      this.fileisDraggedInFromDesktop(e);
    }
  }

  fileIsSelectedFromBrowser(e: Event & DragEvent): void {
    if (
      e.target['files'] &&
      e.target['files']['length'] &&
      this.uploadService.checkFile(e.target['files'], ActiveUploadTypes.Image, true)
    ) {
      for (let i = 0; i < e.target['files']['length']; i++) {
        const image = e.target['files'][i];
        this.uploadFile(image);
      }
      return;
    }
  }

  fileisDraggedInFromDesktop(e: Event & DragEvent): void {
    if (
      e.dataTransfer &&
      this.uploadService.checkFile(e.dataTransfer.files, ActiveUploadTypes.Image, true)
    ) {
      for (let i = 0; i < e.dataTransfer.files.length; i++) {
        const image = e.dataTransfer.files[i];
        this.uploadFile(image);
      }
      return;
    }
  }

有没有办法从我的 HTML 模板中删除此错误代码？

标签： typescript

Answer 1

Event & DragEvent是一个交集类型Event，所以要满足它，你必须有一个包含和的所有成员的对象DragEvent。

如果您想使用联合类型 Event | DragEvent，然后使用类型保护来区分它们。

类型保护的示例：

function foo(evt: Event | DragEvent) {
    if (isDragEvent(evt)) {
        // evt is now known to be a DragEvent
    } else {
        // evt is now know to be an Event
    }
}

function isDragEvent(e: Event | DragEvent): e is DragEvent {
    return (e as DragEvent).dataTransfer !== undefined;
}