typescript 45 lines · 8 steps

A type-safe event emitter in TypeScript

How generics tie event names to their exact argument types so listeners and emits stay in sync at compile time.

Explained by highlit

Advanced generics mapped-types event-emitter type-safety observer-pattern

1type EventMap = Record<string, unknown[]>;
2 
3type Listener<Args extends unknown[]> = (...args: Args) => void;
4 
5export class TypedEmitter<Events extends EventMap> {
private listeners: {
  [K in keyof Events]?: Set<Listener<Events[K]>>;
} = {};
9 
on<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
  (this.listeners[event] ??= new Set()).add(listener);
  return this;
}
14 
once<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
  const wrapper: Listener<Events[K]> = (...args) => {
    this.off(event, wrapper);
    listener(...args);
  };
  return this.on(event, wrapper);
}
22 
off<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
  this.listeners[event]?.delete(listener);
  return this;
}
27 
emit<K extends keyof Events>(event: K, ...args: Events[K]): boolean {
  const handlers = this.listeners[event];
  if (!handlers || handlers.size === 0) return false;
  for (const handler of [...handlers]) {
    handler(...args);
  }
  return true;
}
36 
removeAllListeners<K extends keyof Events>(event?: K): this {
  if (event === undefined) {
    this.listeners = {};
  } else {
    delete this.listeners[event];
  }
  return this;
}
45}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Mapping an event-name type to its argument tuple lets the compiler check every listener and emit for you.
2Copying the handler set before iterating avoids skipping or double-firing when handlers mutate the set mid-emit.
3A `once` listener is just a normal listener that removes itself before delegating to the real callback.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';