typescript 46 lines · 7 steps

A type-safe event bus in TypeScript

A generic MessageBus maps event names to handler sets, keeping payload types in sync with each event key.

Explained by highlit

Advanced generics event-emitter type-safety closures observer-pattern

1type EventMap = Record<string, unknown>;
2 
3type Handler<T> = (payload: T) => void;
4 
5export class MessageBus<Events extends EventMap> {
private handlers = new Map<keyof Events, Set<Handler<unknown>>>();
7 
on<K extends keyof Events>(event: K, handler: Handler<Events[K]>): () => void {
  let set = this.handlers.get(event);
  if (!set) {
    set = new Set();
    this.handlers.set(event, set);
  }
  set.add(handler as Handler<unknown>);
  return () => this.off(event, handler);
}
17 
once<K extends keyof Events>(event: K, handler: Handler<Events[K]>): () => void {
  const wrapped: Handler<Events[K]> = (payload) => {
    off();
    handler(payload);
  };
  const off = this.on(event, wrapped);
  return off;
}
26 
off<K extends keyof Events>(event: K, handler: Handler<Events[K]>): void {
  const set = this.handlers.get(event);
  if (!set) return;
  set.delete(handler as Handler<unknown>);
  if (set.size === 0) this.handlers.delete(event);
}
33 
emit<K extends keyof Events>(event: K, payload: Events[K]): void {
  const set = this.handlers.get(event);
  if (!set) return;
  for (const handler of [...set]) {
    (handler as Handler<Events[K]>)(payload);
  }
}
41 
clear(event?: keyof Events): void {
  if (event === undefined) this.handlers.clear();
  else this.handlers.delete(event);
}
46}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Indexed access types like Events[K] let one generic parameter enforce that every event name carries its matching payload type.
2Storing subscriptions in a Set and returning an unsubscribe closure gives callers a clean, self-contained teardown handle.
3Iterating over a snapshot copy of listeners protects against mutation while handlers fire.

Related explainers

typescript

import { InjectionToken, inject, Provider, isDevMode } from '@angular/core';
import { WINDOW } from './window.token';
 
export interface AnalyticsConfig {

Layered config with an Angular InjectionToken

dependency-injection configuration factory-provider

Intermediate 8 steps

typescript

import { useCallback, useRef, useState } from "react";
 
type UploadZoneProps = {
  accept?: string[];

A drag-and-drop file upload zone in React

drag-and-drop file-validation controlled-state

Intermediate 9 steps

package middleware
 
import (
	"fmt"

How a panic-recovery middleware works in Gin

middleware panic-recovery error-reporting

Intermediate 8 steps

typescript

import { useState, useEffect, useRef, useCallback } from "react";
 
interface Suggestion {
  id: string;

A debounced autocomplete hook in React

debounce custom-hooks abortcontroller

Advanced 7 steps

rust

use axum::body::Bytes;
use axum::http::{header, HeaderValue, StatusCode};
use axum::response::{IntoResponse, Response};
use serde::Serialize;

Custom Axum responses with per-user ETags

etag trait-implementation generics

Intermediate 7 steps

typescript

import { Body, Controller, Ip, Post, UnauthorizedException } from '@nestjs/common';
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
import { UseGuards } from '@nestjs/common';
import { AuthService } from './auth.service';