Sanitizing a field in an Angular subscribed array when its a optional field in the interface to avoid Overload error

Question

I am getting an Overload error when sanitizing data from a Django API. The event.start has no issues, but event.end is erroring out.

Here is my subscribe implementation:

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')
  );
}

Here is the interface as defined in a angular-calendar package I am using:

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;
}

Here is the specific error message.

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'.

I also tried changing the interface definition to omit the '?' optional assignment for the end field, but that led to my ng build erroring out due to a conflict with these lines of code in my component.

  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);
  }

I'm unclear about the source of the iEvent variable.

Answer 1

Try to change the types in CalendarEvents interface. The error message tells you, that some of the types are incompatible with data which comes from DJANGO API. In some of the cases you get undefined . For testing purposes you could try:

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

Answer 2

The crux of the issue was in the CalendarEventTimesChangedEvent interface. The newEnd was optional, had to change that to required along with the end in the CalendarEvent .

The clue for the issues was given when running ng build .