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> {
6 private listeners: {
7 [K in keyof Events]?: Set<Listener<Events[K]>>;
8 } = {};
9 
10 on<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
11 (this.listeners[event] ??= new Set()).add(listener);
12 return this;
13 }
14 
15 once<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
16 const wrapper: Listener<Events[K]> = (...args) => {
17 this.off(event, wrapper);
18 listener(...args);
19 };
20 return this.on(event, wrapper);
21 }
22 
23 off<K extends keyof Events>(event: K, listener: Listener<Events[K]>): this {
24 this.listeners[event]?.delete(listener);
25 return this;
26 }
27 
28 emit<K extends keyof Events>(event: K, ...args: Events[K]): boolean {
29 const handlers = this.listeners[event];
30 if (!handlers || handlers.size === 0) return false;
31 for (const handler of [...handlers]) {
32 handler(...args);
33 }
34 return true;
35 }
36 
37 removeAllListeners<K extends keyof Events>(event?: K): this {
38 if (event === undefined) {
39 this.listeners = {};
40 } else {
41 delete this.listeners[event];
42 }
43 return this;
44 }
45}
01 / 01
STEP 01

Walkthrough

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

Related explainers

typescript 
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
typescript 
import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component
Intermediate 8 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
Intermediate 7 steps
typescript 
import { parsePhoneNumberFromString, CountryCode } from 'libphonenumber-js';
 
export interface NormalizedPhone {
  e164: string;

Normalizing phone numbers to E.164 in TypeScript

validation normalization error-handling
Intermediate 7 steps
typescript 
import {
  CanActivate,
  ExecutionContext,
  Injectable,

Role-based access with a NestJS guard

authorization guards decorators
Intermediate 6 steps

Share this explainer

Here's the card — post it anywhere.

A type-safe event emitter in TypeScript — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code