What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

Question

What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

I'm currently working on processing an event payload where the event field is a string, and the content of data depends on the value of the event field. While I have come up with a representation that functions correctly, I can't help but feel that there might be a better or more conventional approach:

type EventMap = {
  created: { created: string },
  updated: { updated: string }
}

type Payload<T extends keyof EventMap> = {
  event_id: string;
  event: T;
  data: EventMap[T];
};

type Payloads = Payload<'created'> | Payload<'updated'>

It seems redundant to keep mentioning created and updated. However, using Payload<keyof EventMap> doesn't quite fit either as it allows for any combination.

typescript

Answer 1

Answer №1

You can achieve something similar by doing the following:

type Payloads = { [K in keyof EventMap]: Payload<K> }[keyof EventMap]

Playground

Alternatively, you can directly create the Payloads type from the EventMap:

type Payloads = {
    [K in keyof EventMap]: {
        event_id: string;
        event: K;
        data: EventMap[K];
    }
}[keyof EventMap]

Playground

// works
const x: Payloads = {
    event_id: 'x',
    event: 'created',
    data: {
        created: 's'
    }
}

// works
const y: Payloads = {
    event_id: 'x',
    event: 'updated',
    data: {
        updated: 's'
    }
}

// error due to mixed updated and created
const z: Payloads = {
    event_id: 'x',
    event: 'updated',
    data: {
        created: 's'
    }
}

Answer 2

You can achieve something similar by doing the following:

type Payloads = { [K in keyof EventMap]: Payload<K> }[keyof EventMap]

Playground

Alternatively, you can directly create the Payloads type from the EventMap:

type Payloads = {
    [K in keyof EventMap]: {
        event_id: string;
        event: K;
        data: EventMap[K];
    }
}[keyof EventMap]

Playground

// works
const x: Payloads = {
    event_id: 'x',
    event: 'created',
    data: {
        created: 's'
    }
}

// works
const y: Payloads = {
    event_id: 'x',
    event: 'updated',
    data: {
        updated: 's'
    }
}

// error due to mixed updated and created
const z: Payloads = {
    event_id: 'x',
    event: 'updated',
    data: {
        created: 's'
    }
}

What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

Answer №1

Similar questions

Using an external HTML file to import a template into Vue.js single file components

TypeScript's type 'T' has the potential to be instantiated with any type, even if it is not directly related to 'number'

What is the correct way to declare a class as global in TypeScript?

Tips for utilizing PNG images in Next.js beyond the conventional PUBLIC folder

Verifying TypeScript Class Instances with Node Module Type Checking

Looking for a way to include an input box within a react-select option dropdown menu

Encountering a TypeScript error in Vue 3 when trying to assign a type of '($event: any) => void' to an event listener

Custom Angular directive for collapsing sub menus with CSS

Each time the Angular Service is called, it undergoes a reset process

Service error: The function of "method" is not valid

Enhancing Luxon DateTime with extension type support

How can Vue Router be integrated with Vue.JS SSR?

Refine a union type by considering the properties already defined in an object

Hand over the component method as an argument to a class

Limiting the Rate of Requests to a TCP Server using net.Server

Module `coc-tsserver` not found (error ts2307)

When using RXJS, the method BehaviorSubject.next() does not automatically notify subscribers

Encountering an error while receiving a response for the Update API request

Managing a digital timepiece within a multiplayer gaming environment

The typescript compiler encounters an error when processing code that includes a generator function