Does TypeScript support events on classes?

Question

I am just wondering if in TypeScript you can define custom events on your classes or interfaces?

What would this look like?

Answer 1

You can use custom events in TypeScript. I'm not sure exactly what you are trying to do, but here is an example:

module Example {
    export class ClassWithEvents {
        public div: HTMLElement;

        constructor (id: string) {
            this.div = document.getElementById(id);

            // Create the event
            var evt = document.createEvent('Event');
            evt.initEvent('customevent', true, true);

            // Create a listener for the event
            var listener = function (e: Event) {
                var element = <HTMLElement> e.target;
                element.innerHTML = 'hello';
            }

            // Attach the listener to the event
            this.div.addEventListener('customevent', listener);

            // Trigger the event
            this.div.dispatchEvent(evt);
        }
    }
}

If you are looking to do something more specific please let me know.

Answer 2

The NPM package Strongly Typed Events for TypeScript (GitHub) implements 3 types of events: IEvent<TSender, TArgs>, ISimpleEvent<TArgs> and ISignal. This makes it easier to use the right kind of event for your project. It also hides the dispatch method from your event, as good information hiding should do.

Event Types / Interfaces - The definitions of the events:

interface IEventHandler<TSender, TArgs> {
    (sender: TSender, args: TArgs): void
}

interface ISimpleEventHandler<TArgs> {
    (args: TArgs): void
}

interface ISignalHandler {
    (): void;
}

Example - This example shows how the 3 types of events can be implemented using a ticking clock:

class Clock {

    //implement events as private dispatchers:
    private _onTick = new SignalDispatcher();
    private _onSequenceTick = new SimpleEventDispatcher<number>();
    private _onClockTick = new EventDispatcher<Clock, number>();

    private _ticks: number = 0;

    constructor(public name: string, timeout: number) {
        window.setInterval( () => { 
            this.Tick(); 
        }, timeout);
    }

    private Tick(): void {
        this._ticks += 1;

        //trigger event by calling the dispatch method and provide data
        this._onTick.dispatch();
        this._onSequenceTick.dispatch(this._ticks);
        this._onClockTick.dispatch(this, this._ticks);
    }

    //expose the events through the interfaces - use the asEvent
    //method to prevent exposure of the dispatch method:
    public get onTick(): ISignal {
        return this._onTick.asEvent();
    }

    public get onSequenceTick() : ISimpleEvent<number>{
        return this._onSequenceTick.asEvent();
    }

    public get onClockTick(): IEvent<Clock, number> {
        return this._onClockTick.asEvent();
    }
}

Usage - It can be used like this:

let clock = new Clock('Smu', 1000);

//log the ticks to the console
clock.onTick.subscribe(()=> console.log('Tick!'));

//log the sequence parameter to the console
clock.onSequenceTick.subscribe((s) => console.log(`Sequence: ${s}`));

//log the name of the clock and the tick argument to the console
clock.onClockTick.subscribe((c, n) => console.log(`${c.name} ticked ${n} times.`))

Read more here: On events, dispatchers and lists (a general explanation of the system)

Tutorials
I've written a few tutorials on the subject:

• Strongly typed event handlers in TypeScript (Part 1)
• Using strongly typed events in TypeScript with interfaces (Part 2)
• Strongly Typed Events in TypeScript using an event list (Part 3)
• Adding named events to your classes (Part 4)
• 0.2.0 Simple event support
• 0.3.0 Signal support