Type-safe event emitter pattern in Typescript - Mini Project: Build & Apply

Type-safe event emitter pattern

📖 Scenario: You are building a simple event system for a chat app. Different parts of the app listen to events like new messages or user status changes. You want to make sure the events and their data are always the right type to avoid bugs.

🎯 Goal: Create a type-safe event emitter in TypeScript that only allows specific events with correct data types. Then use it to listen and emit events safely.

📋 What You'll Learn

Create an interface called ChatEvents with two events: message and userStatus

Define message event data as an object with from (string) and text (string)

Define userStatus event data as an object with user (string) and online (boolean)

Create a generic EventEmitter class that uses the ChatEvents interface for type safety

Add on and emit methods to EventEmitter that enforce event names and data types

Use the EventEmitter to listen for message and userStatus events and print their data

💡 Why This Matters

🌍 Real World

Event emitters are used in apps to handle things like user actions, data updates, or notifications in a clean way.

💼 Career

Understanding type-safe event emitters helps you build reliable, maintainable code in TypeScript, a skill valued in frontend and backend development.

1

Define the event types interface

Create an interface called ChatEvents with two properties: message and userStatus. Set message to an object with from (string) and text (string). Set userStatus to an object with user (string) and online (boolean).

Typescript

// Your code here

Need a hint?

Use interface keyword and define the two event names as keys with their object types.

2

Create the generic EventEmitter class

Create a generic class called EventEmitter with a type parameter T. Inside, create a private property listeners as an object mapping keys of T to arrays of functions that take the event data and return void. Initialize listeners as an empty object.

Typescript

interface ChatEvents {
  message: { from: string; text: string };
  userStatus: { user: string; online: boolean };
}

// Your code here

Need a hint?

Use a mapped type for listeners to store arrays of callback functions for each event key.

3

Add on and emit methods with type safety

Inside EventEmitter, add a method on that takes an event name event of type keyof T and a callback listener that takes data of type T[typeof event]. The method should add the listener to the listeners array for that event. Also add a method emit that takes an event name and data of the correct type, and calls all listeners for that event with the data.

Typescript

interface ChatEvents {
  message: { from: string; text: string };
  userStatus: { user: string; online: boolean };
}

class EventEmitter {
  private listeners: { [K in keyof T]?: ((data: T[K]) => void)[] } = {};

  // Your code here
}

Need a hint?

Use generic methods with K extends keyof T to keep event names and data types linked.

4

Use EventEmitter to listen and emit events

Create an instance chatEmitter of EventEmitter using ChatEvents. Use chatEmitter.on to listen for message events and print Message from {from}: {text}. Also listen for userStatus events and print User {user} is {online ? 'online' : 'offline'}. Then emit a message event with from as 'Alice' and text as 'Hello!'. Emit a userStatus event with user as 'Bob' and online as true.

Typescript

interface ChatEvents {
  message: { from: string; text: string };
  userStatus: { user: string; online: boolean };
}

class EventEmitter {
  private listeners: { [K in keyof T]?: ((data: T[K]) => void)[] } = {};

  on(event: K, listener: (data: T[K]) => void): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(listener);
  }

  emit(event: K, data: T[K]): void {
    this.listeners[event]?.forEach(listener => listener(data));
  }
}

// Your code here

Need a hint?

Use console.log inside listeners to print the event data. Emit events with correct data objects.