feat: extend CustomEvent types for ionic components

[Spinnenzunge]

Feature Request

Create typing for Ionics various EventEmitter that extend ES CustomEvent.

Ionic version:

[x] 5.x

Describe the Feature Request

Right now if for example I want to safe type the event parameter passed to a callback function for the ionInfinite event emitter and I type it as CustomEvent, I get a ts compiler error as soon as I call event.target.complete() because complete() is not a valid method for the target object in CustomEvent.

As a fallback I have to type my passed event as any for it to work.

Describe Preferred Solution

Create types for ionics various EventEmitter that extend ES CustomEvent.

Describe Alternatives

None

Related Code

Template:

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">

Controller:

loadData(event: CustomEvent): void {
  event.target.complete();
}

[liamdebeasi]

Thanks, I think we could do this. Something like:

interface InfiniteScrollEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

for components that actually provide a payload (such as Searchbar):

interface SearchbarEventDetail {
  value: string | undefined;
}

interface SearchbarEvent extends CustomEvent {
  target: HTMLIonSearchbarElement;
  detail: SearchbarEventDetail;
}

[Spinnenzunge]

Sounds great!

[AliAlmutawakel]

Also, I think this might be related.

$event in angular is always of type Event

when it's really of type CustomEvent. See this snippet of code from Ionic codebase:

@ProxyCmp({ inputs: ["allowEmptySelection", "name", "value"] })
@Component({ selector: "ion-radio-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["allowEmptySelection", "name", "value"] })
export class IonRadioGroup {
  ionChange!: EventEmitter<CustomEvent>; // <---- Emits CustomEvent not Event
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ["ionChange"]);
  }
}

So we need to change the type every time to make it work and set it to any or Event

setBillingAddress(event : Event){
  this.billingAddress = (event as CustomEvent).detail.value as Address;
}

This is a related discussion from the community.

https://forum.ionicframework.com/t/argument-of-type-event-is-not-assignable-to-parameter-of-type-customevent-any/206639

[liamdebeasi]

Hi everyone,

Here is a dev build of this new feature is anyone would like to test it out. Please note that this feature will be in Ionic v6 and the dev build is subject to the Ionic v6 Breaking Changes. For a list of all interfaces now available, please see #23956.

Regarding #22925 (comment), this is a different issue that is out of scope for this feature. I recommend opening a new issue with a code reproduction, and I will be more than happy to take a look. Let me think on this more and see if I can resolve it in this feature.

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Stencil/Vanilla JavaScript

npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been added via #23956 and will be available in an upcoming Ionic 6 beta.

Please feel free to test and leave feedback!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.