diff --git a/doc/reference/event_handling.md b/doc/reference/event_handling.md index 06e90354..4cbd3c78 100644 --- a/doc/reference/event_handling.md +++ b/doc/reference/event_handling.md @@ -78,6 +78,19 @@ The `t-on` directive allows to prebind its arguments. For example, Here, `expr` is a valid Owl expression, so it could be `true` or some variable from the rendering context. +### Type Hinting + +Note that if you work with Typescript, the `trigger` method is generic on the type of the payload. + +You can then describe the type of the event, so you will see typing errors... + +```typescript +this.trigger('my-custom-event', payload); +``` +```typescript +myCustomEventHandler(ev: OwlEvent) { ... } +``` + ## Inline Event Handlers One can also directly specify inline statements. For example, diff --git a/src/component/component.ts b/src/component/component.ts index 8a7521b6..f172bcff 100644 --- a/src/component/component.ts +++ b/src/component/component.ts @@ -433,8 +433,8 @@ export class Component { * up to the parent DOM nodes. Thus, it must be called between mounted() and * willUnmount(). */ - trigger(eventType: string, payload?: any) { - this.__trigger(this, eventType, payload); + trigger(eventType: string, payload?: T) { + this.__trigger(this, eventType, payload); } //-------------------------------------------------------------------------- @@ -512,9 +512,9 @@ export class Component { * Private trigger method, allows to choose the component which triggered * the event in the first place */ - __trigger(component: Component, eventType: string, payload?: any) { + __trigger(component: Component, eventType: string, payload?: T) { if (this.el) { - const ev = new OwlEvent(component, eventType, { + const ev = new OwlEvent(component, eventType, { bubbles: true, cancelable: true, detail: payload,