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

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

Remove the package from the @types folder within the node_modules directory

Tips for addressing the browser global object in TypeScript when it is located within a separate namespace with the identical name

Encountering CORS error when making a call to AWS API from Angular 9

Updating a label dynamically in Angular

Is it feasible to customize Angular Material Constants within select.ts?

What makes Mathematics a unique object in JavaScript programming?

Ensure Jest returns the accurate file paths for images in a TypeScript and React environment

Error: XYZ has already been declared in a higher scope in Typescript setInterval

Create a global variable by importing an external module in TypeScript

I encountered a problem when trying to set up ngx-Spinner version 8.0.3

NestJS does not recognize TypeORM .env configuration in production build

React | What could be preventing the defaultValue of the input from updating?

Determining the height of dynamically rendered child elements in a React application

The return type in Typescript is populated with a generic type name that lacks meaningful

What is the solution for resolving the no-unsafe-any rule?

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

Utilizing asynchronous methods within setup() in @vue-composition

Encountering error "module fibers/future not found" while creating a meteor method in typescript