Closed Spinnenzunge closed 3 years ago
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;
}
Sounds great!
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.
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 https://github.com/ionic-team/ionic-framework/pull/23956.
~Regarding https://github.com/ionic-team/ionic-framework/issues/22925#issuecomment-859750476, 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/angular@6.0.0-dev.202109211837.c9dd527
React
npm install @ionic/react@6.0.0-dev.202109211837.c9dd527 @ionic/react-router@6.0.0-dev.202109211837.c9dd527
Vue
npm install @ionic/vue@6.0.0-dev.202109211837.c9dd527 @ionic/vue-router@6.0.0-dev.202109211837.c9dd527
Stencil/Vanilla JavaScript
npm install @ionic/core@6.0.0-dev.202109211837.c9dd527
Thanks for the issue. This has been added via https://github.com/ionic-team/ionic-framework/pull/23956 and will be available in an upcoming Ionic 6 beta.
Please feel free to test and leave feedback!
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.
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 callevent.target.complete()
becausecomplete()
is not a valid method for the target object inCustomEvent
.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:
Controller: