# Strongly typed event handlers in TypeScript (Part 1)

**Date:** 2016-03-26  
**Author:** Kees C. Bakker  
**Categories:** Strongly Typed Events, TypeScript  
**Original:** https://keestalkstech.com/strongly-typed-event-handlers-in-typescript-part-1/

![Strongly typed event handlers in TypeScript (Part 1)](https://keestalkstech.com/wp-content/uploads/2016/03/cassie-boca-264714-unsplash.jpg)

---

As a C# programming I have a lot of interest in the [TypeScript project](http://www.typescriptlang.org/). Lately I've been playing around with it to look what it can do. I found myself in need of some event handling, so I decided to build something that looks like the event handling .Net gives you. It grew into [Strongly Typed Events for TypeScript](https://github.com/KeesCBakker/Strongly-Typed-Events-for-TypeScript). This tutorial is [part of a series](https://keestalkstech.com/tag/strongly-typed-event-handlers-in-type-script/).

*2018-02: we've updated to a new version of the project. The article matches the latest version. Get the latest version by running:  *`npm install strongly-typed-events --save`

## The IEvent<TSender, TArgs>

An event is defined as a pair of **sender** and **event** **arguments**. It's leveraging [generics](http://www.typescriptlang.org/docs/handbook/generics.html) to make them strongly typed. Note: the actual interface in the project is a little bit more complex.

```ts
/** Models an event with a generic sender and generic arguments */
interface IEvent<TSender, TArgs> {

    subscribe(fn: (sender: TSender, args: TArgs) => void): void;

    unsubscribe(fn: (sender: TSender, args: TArgs) => void): void;
}
```

## Example implementation: a pulse generator

Let's create a pulse generator that will trigger an event based on the given the frequency in [Hertz](https://www.wikiwand.com/en/Hertz). I'm using the `EventDispatcher` from the package:

```
class PulseGenerator {
  //create private event dispatcher
  private _onPulsate = new EventDispatcher();
  frequencyInHz: number;

  //expose the event dispatcher through the IEvent interface
  //this will hide the dispatch method outside the class
  get onPulsate(): IEvent {
    return this._onPulsate.asEvent();
  }

  constructor(frequencyInHz: number) {
    this.frequencyInHz = frequencyInHz;
    this.start();
  }

  private start() {
    window.setTimeout(() => {
      this.start();

      //dispatch event by calling the dispatcher
      this._onPulsate.dispatch(this, this.frequencyInHz);
    }, 1000 / this.frequencyInHz);
  }
}
```

Now let's subscribe to the event and beep each time we receive a pulse.

```ts
var generator = new PulseGenerator(1);

//subscribe on the onPulse event
generator.onPulsate.subscribe((p, hz) => {

    //play beep:
    var snd = new Audio("data:audio/wav;base64,UklGRkYDAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YSIDAAAAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAAAzNRVWFVYzNQAAzcrrqeupzcoAADM1FVYVVjM1AADNyuup66nNygAAMzUVVhVWMzUAAM3K66nrqc3KAACJNO5T2lKKMgAAys50sYeyydAAAOMtK0kYSOQrAABx1Ta8Sr1v1wAAPCdoPlU9PiUAABfc+cYMyBbeAACWIKYzkjKXHgAAveK70c/SvOQAAO8Z4yjQJ/EXAABk6X7ckd1j6wAASRMhHg0dShEAAArwQedU6AnyAACjDF4TSxKkCgAAsfYD8hfzr/gAAPwFnAiIB/0DAABX/cb82f1W/wAA");
    snd.play();
    
});

//change frequency
setTimeout(function () {
    generator.frequencyInHz = 2;
}, 3000);
```

## More

Check out the following:

- [Strongly typed event handlers in TypeScript (Part 1)](https://keestalkstech.com/2016/03/strongly-typed-event-handlers-in-typescript-part-1)
- [Using strongly typed events in TypeScript with interfaces (Part 2)](https://keestalkstech.com/2016/03/using-strongly-typed-events-in-typescript-with-interfaces-part2/)
- [Strongly Typed Events in TypeScript using an event list (Part 3)](https://keestalkstech.com/2016/03/strongly-typed-events-in-typescript-using-an-event-list-part-3/)
- [Adding named events to your classes (Part 4)](https://keestalkstech.com/2016/03/adding-named-events-to-your-typescript-classes-part-4/)
- GitHub: [https://github.com/KeesCBakker/Strongly-Typed-Events-for-TypeScript](https://github.com/KeesCBakker/Strongly-Typed-Events-for-TypeScript)