清理 Angular 订阅数组中的字段，当它是接口中的可选字段以避免重载错误

Question

从 Django API 清理数据时出现过载错误。 event.start没有问题，但event.end了。

这是我的订阅实现：

public getEvents() {
    this.apiService.getEvent()
    .subscribe(
    (data: any)  => {
      this.events = data;
      for (let event of this.events) {
        event.start = new Date(event.start);
        event.end = new Date(event.end);
      }
    },
    err => console.error(err),
    () => console.log('done loading events')
  );
}

这是我正在使用的 angular-calendar 包中定义的接口：

export interface CalendarEvent<MetaType = any> {
    id?: string | number;
    start: Date;
    end?: Date;
    title: string;
    color?: EventColor;
    actions?: EventAction[];
    allDay?: boolean;
    cssClass?: string;
    resizable?: {
        beforeStart?: boolean;
        afterEnd?: boolean;
    };
    draggable?: boolean;
    meta?: MetaType;
}

这是具体的错误信息。

TS2769: No overload matches this call.
  Overload 1 of 4, '(value: string | number | Date): Date', gave the following error.
    Argument of type 'Date | undefined' is not assignable to parameter of type 'string | number | Date'.
      Type 'undefined' is not assignable to type 'string | number | Date'.
  Overload 2 of 4, '(value: string | number): Date', gave the following error.
    Argument of type 'Date | undefined' is not assignable to parameter of type 'string | number'.
      Type 'undefined' is not assignable to type 'string | number'.

我还尝试更改接口定义以省略“？” end 字段的可选分配，但由于与组件中的这些代码行冲突，导致我的ng build出错。

  eventTimesChanged({
    event,
    newStart,
    newEnd,
  }: CalendarEventTimesChangedEvent): void {
    this.events = this.events.map((iEvent) => {
      if (iEvent === event) {
        return {
          ...event,
          start: newStart,
          end: newEnd,
        };
      }
      return iEvent;
    });
    this.handleEvent('Dropped or resized', event);
  }

我不清楚 iEvent 变量的来源。

Answer 1

尝试更改 CalendarEvents 界面中的类型。 错误消息告诉您，某些类型与来自 DJANGO API 的数据不兼容。 在某些情况下，您会得到undefined 。 出于测试目的，您可以尝试：

  id?: string | number | undefined;
    start: Date | undefined;
    end?: Date | undefined;

Answer 2

问题的症结在于CalendarEventTimesChangedEvent接口。 newEnd是可选的，必须将其与CalendarEvent中的end一起更改为必需。

运行ng build时给出了问题的线索。