Combining union types with intersection operators in Typescript

Question

Combining union types with intersection operators in Typescript

Here's a concept for an event handling system:

type EventMap = Record<string, any>;

type EventKey<T extends EventMap> = string & keyof T;
type EventReceiver<T> = (params: T) => void;

interface Emitter<T extends EventMap> {
  on<K extends EventKey<T>>
    (eventKey: K, fn: EventReceiver<T[K]>): void;
  emit<K extends EventKey<T>>
    (eventKey: K, params: T[K]): void;
}

// example usage
const eventHandler = eventEmitter<{
  data: Buffer | string;
  end: undefined;
}>();

// OK!
eventHandler.on('data', (x: string) => {});

// Error! 'string' is not assignable to 'number'
eventHandler.on('data', (x: number) => {});

The setup functions correctly but I have questions about it:

Why is EventKey defined with string &?
Do we really need generics K in the on and emit methods or could we simplify them by using just keyof T for the type of eventKey?

Thank you for your insights.

typescript

Answer 1

Answer №1

Why is it necessary to append a string & here?

The use of string & ... ensures that only keys of type string are valid for defining the EventKey type.

Despite EventMap being declared as Record<string,any>, it is still possible to assign an object with non-string properties:

const a: EventMap = {
  foo: 'bar',
  100: 'baz', // error, not a string property
}

Why does this happen? Because objects can have excess properties.

In such scenarios, string & keyof T would return never for properties that are not of type string.

Could eventKey parameter's type simply be keyof T?

This allows for keys defined as union types that extend string (Refer to this answer):

type EnumK = 'alpha' | 'beta'
type MyObject = {[P in EnumK]: string }

const obj: SomeObj = {
  alpha: 'foo',
  beta: 'bar'
}

In this case, the keys of obj represent an extension of string, specifically the union of string literal types alpha and beta. By using K extends ..., you capture this relationship and ensure type safety when indexing T[K].

Answer 2

Why is it necessary to append a string & here?

The use of string & ... ensures that only keys of type string are valid for defining the EventKey type.

Despite EventMap being declared as Record<string,any>, it is still possible to assign an object with non-string properties:

const a: EventMap = {
  foo: 'bar',
  100: 'baz', // error, not a string property
}

Why does this happen? Because objects can have excess properties.

In such scenarios, string & keyof T would return never for properties that are not of type string.

Could eventKey parameter's type simply be keyof T?

This allows for keys defined as union types that extend string (Refer to this answer):

type EnumK = 'alpha' | 'beta'
type MyObject = {[P in EnumK]: string }

const obj: SomeObj = {
  alpha: 'foo',
  beta: 'bar'
}

In this case, the keys of obj represent an extension of string, specifically the union of string literal types alpha and beta. By using K extends ..., you capture this relationship and ensure type safety when indexing T[K].

Combining union types with intersection operators in Typescript

Answer №1

Similar questions

The error message indicates that the 'aboutData' property is not found within the 'never[]' data type

Utilizing the functionalities provided by node.js, I came across an issue and sought out a solution for the error message "TypeError: __WEBPACK_IMPORTED_MODULE_3_fs__.writeFile is not a function"

Sending an object between two components without a direct parent-child connection

Ways to dynamically update a Vuetify 3 element's placeholder text?

What are the steps to initiating a phone call using Nativescript?

What causes interface to generate TS2345 error, while type does not?

Modify the standard localStorage format

Retrieve a static property from a specific type

What methods can be used to accurately display the data type with TypeOf()?

Issue TS2769: No matching overload found for this call. The type 'string | null' cannot be assigned to type 'string | string[]'

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

Determining the data type of a property within an interface using TypeScript

Merge mocha with Typescript, and include the watch feature

What is the trick to make the "@" alias function in a Typescript ESM project?

Converting Enum Values into an Array

What are the steps to validate a form control in Angular 13?

React Native is throwing an error message saying that the Component cannot be used as a JSX component. It mentions that the Type '{}' is not assignable to type 'ReactNode'

Utilize MaterialUI's Shadows Type by importing it into your project

What is the best way to generate a dummy ExecutionContext for testing the CanActivate function in unit testing?

Testing React Hooks in TypeScript with Jest and @testing-library/react-hooks