Type-safe event emitter pattern in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a type-safe event emitter interface.

Typescript

interface EventEmitter<T> {
  on(event: keyof T, listener: (payload: T[1]) => void): void;
}

Drag options to blanks, or click blank then click option'

A[keyof T]

B[keyof T][]

C[event]

D[string]

Attempts:

3 left

💡 Hint

Common Mistakes

Using an array type for the payload parameter.

Using a string type instead of the event key type.

The listener function receives the payload of the event type T indexed by the event key.

2fill in blank

medium

Complete the code to define a type-safe emit method.

Typescript

emit(event: keyof T, payload: T[1]): void;

Drag options to blanks, or click blank then click option'

A[keyof T]

B[string]

C[number]

D[any]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic 'any' type for payload.

Using string or number instead of the event key type.

The payload type must match the event key's type in T.

3fill in blank

hard

Fix the error in the listener type to ensure type safety.

Typescript

on(event: keyof T, listener: (payload: [1]) => void): void;

Drag options to blanks, or click blank then click option'

Aany

BT[event]

CT[keyof T]

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' loses type safety.

Using T[keyof T] is too broad and not specific to the event.

Using T[event] ensures the listener receives the correct payload type for the event.

4fill in blank

hard

Fill both blanks to define a type-safe event emitter class.

Typescript

class TypedEmitter<T> implements EventEmitter<T> {
  private listeners: { [K in keyof T]?: Array<(payload: T[1]) => void> } = {};

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

Drag options to blanks, or click blank then click option'

A[K]

B[keyof T]

C[event]

D[string]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'keyof T' instead of the mapped type variable K.

Using 'event' or 'string' which are not valid index types here.

The listeners object uses mapped types with K in keyof T, so the payload type is T[K].

5fill in blank

hard

Fill all three blanks to implement the emit method with type safety.

Typescript

emit(event: keyof T, payload: T[1]): void {
  const eventListeners = this.listeners[2];
  if (eventListeners) {
    eventListeners.forEach(listener => listener([3]));
  }
}

Drag options to blanks, or click blank then click option'

A[event]

B[keyof T]

Cpayload

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'keyof T' instead of the event variable to index listeners.

Passing 'event' instead of 'payload' to listeners.

The listeners are accessed by event key, and each listener is called with the payload.

Practice

1. What is the main benefit of using a type-safe event emitter in TypeScript?

easy

A. It makes the code run faster by optimizing event handling.

B. It ensures events and their data match expected types, preventing runtime errors.

C. It automatically logs all emitted events to the console.

D. It allows emitting events without defining their types.

Solution

1. Step 1: Understand type safety in event emitters

   Type-safe event emitters use TypeScript types to ensure events and their data match expected types.

2. Step 2: Identify the benefit of type safety

   This prevents runtime errors by catching mismatches during development, improving code reliability.

3. Final Answer:

   It ensures events and their data match expected types, preventing runtime errors. -> Option B

4. Quick Check:

   Type safety = prevents runtime errors [OK]

Hint: Remember: type-safe means matching event names and data types [OK]

Common Mistakes:

• Thinking it improves runtime speed
• Assuming it logs events automatically
• Believing it allows untyped events

2. Which of the following is the correct way to define an interface for a type-safe event emitter with events login (payload: string) and logout (no payload)?

easy

A. interface Events { login: string; logout: null; }

B. interface Events { login: string; logout: void; }

C. interface Events { login: string; logout: undefined; }

D. interface Events { login: string; logout: never; }

Solution

1. Step 1: Understand event payload types

   Events with no payload should use undefined to indicate no data is expected.

2. Step 2: Check interface options

   interface Events { login: string; logout: undefined; } uses logout: undefined, which correctly represents no payload for the logout event.

3. Final Answer:

   interface Events { login: string; logout: undefined; } -> Option C

4. Quick Check:

   No payload event = undefined type [OK]

Hint: Use 'undefined' type for events with no payload [OK]

Common Mistakes:

• Using void which is a function return type
• Using null which means absence of value
• Using never which means impossible type

3. Given this type-safe event emitter interface and usage:

interface Events {
  message: string;
  error: { code: number; message: string };
}

const emitter = new TypedEmitter<Events>();
emitter.on('message', (msg) => console.log(msg));
emitter.emit('error', { code: 404, message: 'Not found' });

What will be the output when the error event is emitted?

medium

A. No output because no listener for 'error' event is registered.

B. Logs: { code: 404, message: 'Not found' }

C. Throws a type error at runtime.

D. Logs: 'Not found'

Solution

1. Step 1: Check registered event listeners

   Only a listener for 'message' event is registered, no listener for 'error'.

2. Step 2: Understand event emission behavior

   Emitting 'error' without a listener produces no output; no automatic logging occurs.

3. Final Answer:

   No output because no listener for 'error' event is registered. -> Option A

4. Quick Check:

   Emit without listener = no output [OK]

Hint: Only events with listeners produce output [OK]

Common Mistakes:

• Assuming emit logs automatically
• Expecting runtime error without listener
• Confusing event data with console output

4. Consider this code snippet using a type-safe event emitter:

interface Events {
  update: number;
}

const emitter = new TypedEmitter<Events>();
emitter.on('update', (data: string) => {
  console.log(data);
});

What is the problem with this code?

medium

A. There is no problem; the code is correct.

B. The event name 'update' is not defined in the interface.

C. The emitter instance is not created correctly.

D. The listener callback parameter type does not match the event payload type.

Solution

1. Step 1: Check event payload type in interface

   The 'update' event expects a number payload.

2. Step 2: Check listener callback parameter type

   The callback expects a string, which mismatches the expected number.

3. Final Answer:

   The listener callback parameter type does not match the event payload type. -> Option D

4. Quick Check:

   Listener param type must match event payload type [OK]

Hint: Match listener parameter type to event payload type [OK]

Common Mistakes:

• Ignoring type mismatch warnings
• Assuming any type is allowed
• Confusing event names with payload types

5. You want to create a type-safe event emitter for a chat app with events:
- join: payload is username (string)
- leave: payload is username (string)
- message: payload is an object with user (string) and text (string)

Which interface correctly defines these events for type safety?

hard

A. interface ChatEvents { join: string; leave: string; message: { user: string; text: string }; }

B. interface ChatEvents { join: string; leave: string; message: string; }

C. interface ChatEvents { join: { username: string }; leave: { username: string }; message: { user: string; text: string }; }

D. interface ChatEvents { join: string; leave: undefined; message: { user: string; text: string }; }

Solution

1. Step 1: Analyze event payload requirements

   'join' and 'leave' expect a username string; 'message' expects an object with user and text strings.

2. Step 2: Match interface to requirements

   interface ChatEvents { join: string; leave: string; message: { user: string; text: string }; } matches exactly: 'join' and 'leave' as string, 'message' as object with user and text.

3. Final Answer:

   interface ChatEvents { join: string; leave: string; message: { user: string; text: string }; } -> Option A

4. Quick Check:

   Match payload types exactly for type safety [OK]

Hint: Match event names and payload types exactly in interface [OK]

Common Mistakes:

• Using wrong payload types for events
• Omitting required object structure
• Using undefined for events that need payload