Export MbscCalendarLabel interface for TypeScript projects

#1

Hi!

My environment is the following (I’m using @mobiscroll/angular):

  • Angular 15.2.0
  • Mobiscroll 5.22.3

I have an event handler attached to the event onLabelClick. This event emits an MbscLabelClickEvent which has the following specification:

export interface MbscLabelClickEvent {
    date: Date;
    domEvent: any;
    label: MbscCalendarLabel;
    labels: MbscCalendarLabel[];
    event: MbscCalendarEvent;
    inst: EventcalendarBase;
}

Mobiscroll exports the MbscLabelClickEvent but it doesn’t export the MbscCalendarLabel interface which I need for adding the correct types in my code.

The use case would be similar to something like this:

// This is the event handle that is attached to the onLabelClick event
handleLabelClick(event: MbscLabelClickEvent): void {
    callSomeFunctionThatReceivesTheLabels(event.labels ?? []);
}

callSomeFunctionThatReceivesTheLabels(labels: MbscCalendarLabel[]): void {

      // Here I show a modal based on the labels clicked
}

I can add the correct type for the argument of the second function because I need Mobiscroll to make public the interface MbscCalendarLabel (is part of the public API of Mobiscroll as it’s a field in the onLabelClick event).

Right now as a workaround I have the following in my code which I don’t like a lot:

import { MbscCalendarLabel } from '@mobiscroll/angular/dist/js/core/shared/calendar-view/calendar-view.types';

I would prefer to be able to write the following import:

import { MbscCalendarLabel } from '@mobiscroll/angular':
#2

Have you tried just extracting the type from the event object? Then you wouldn’t need a separate import:

type MbscCalendarLabel = MbscLabelClickEvent["label"];

#3

Hi!

Thanks for the suggestion! It’s a really nice workaround that could be used.

But it doesn’t solve the real problem:

Mobiscroll is not exporting correctly the interfaces that are part of the public API that they are offering.

MbscCalendarLabel is part of the event MbscLabelClickEvent, so it’s part of the public API. It should be accessible by writing:

import { MbscCalendarLabel } from '@mobiscroll/angular';

I can use the type alias that you’re suggesting but I would prefer that Mobiscroll still exported the interface so users don’t have to use workarounds to make it work.

Workarounds can be used to solve problems in the near future but shouldn’t be treated as the accepted solution for the real problem. I want to make this clear because I don’t want Mobiscroll to read this thread and think that because there is a workaround to solve the problem, there is nothing to do or change in the library.

At the end I’m trying to write code that can be maintained for at least the following 10-15 years, I don’t like to be adding workarounds in my code. If I started accepting workarounds to solve my problems, after 10 years, it will be too difficult to maintain it.

I have written a few TypeScript libraries myself and I always make sure that all the interfaces and type aliases that are involved in the public API can be easily imported. This gives a better developer experience in my opinion.

And to be honest I need the interface MbscCalendarLabel in more than one place. If I use your workaround I have two options:

  • Write the type alias that you suggested in every file where I needed
  • Create a global declaration file (*.d.ts) so I can access the type alias that you suggested in the entire project.

I really don’t like any of the two options (I would prefer not having to add a declaration file just for one type alias).

Thanks anyway!

#4

Of course, it was just a workaround for you so you could avoid that gnarly import! We should absolutely have access to all relevant types that are returned by the mobiscroll API.

1 Like
#5

Hi @Josep_Ponsati,

I just checked and the Mobiscroll does export the MbscCalendarLabel interface.
Can you confirm?

image