Generate a versatile Union type featuring a mapped property

Question

Generate a versatile Union type featuring a mapped property

I am currently working with different types of data

enum DataTypes {
  Email = 'email',
  Checkbox = 'checkbox',
}

type DataTypeValues = {
  [DataTypes.Email]: string;
  [DataTypes.Checkbox]: boolean;
};

type Type1<T extends DataTypes> = { type: T } & {
  [key in T]: DataTypeValues[T];
};

type Type2 = Type1<DataTypes.Email | DataTypes.Checkbox>

In the given example, Type2 looks like this:

{
  type: 'email' | 'checkbox',
  email: string,
  checkbox: boolean
}

However, I actually need it to be structured as follows:

{
  type: 'email',
  email: string
} | {
  type: 'checkbox',
  checkbox: boolean
}

I have extensively studied TypeScript documentation on typings and found some interesting information, but nothing that addresses my specific scenario.

Is there a way to achieve the desired structure, or should I consider modifying my base types (DataTypes, DataTypeValues)?

typescript types

Answer 1

Answer №1

Imagine creating a type that encompasses all possible values:

type AllValues<T extends Types> = {
  [key in T]: {
    kind: key,
    info: MappedInfo[key]
  }
}

type FullType = AllValues<Types.Email | Types.Checkbox>

In this case, FullType looks like this:

{
  email: {
    kind: 'email',
    info: string
  },
  checkbox: {
    kind: 'checkbox',
    info: boolean
  }
}

You can then use a generic to iterate through this map and convert it into a union type:

type AllValues<T extends Types> = {
  [key in T as string]: {
    kind: key;
  } & {
    [prop in key]: MappedInfo[key];
  };
}[T];

As a result, FullType transforms into:

({
    kind: Types.Email;
} & {
    email: string;
}) | ({
    kind: Types.Checkbox;
} & {
    checkbox: boolean;
})

Answer 2

Imagine creating a type that encompasses all possible values:

type AllValues<T extends Types> = {
  [key in T]: {
    kind: key,
    info: MappedInfo[key]
  }
}

type FullType = AllValues<Types.Email | Types.Checkbox>

In this case, FullType looks like this:

{
  email: {
    kind: 'email',
    info: string
  },
  checkbox: {
    kind: 'checkbox',
    info: boolean
  }
}

You can then use a generic to iterate through this map and convert it into a union type:

type AllValues<T extends Types> = {
  [key in T as string]: {
    kind: key;
  } & {
    [prop in key]: MappedInfo[key];
  };
}[T];

As a result, FullType transforms into:

({
    kind: Types.Email;
} & {
    email: string;
}) | ({
    kind: Types.Checkbox;
} & {
    checkbox: boolean;
})

Generate a versatile Union type featuring a mapped property

Answer №1

Similar questions

Error message displaying Angular Service not able to be injected into component: StaticInjectorError in AppModule

Disable TS4023 error in TypeScript: Unable to name external module "xyz"

The JSON.stringify method in TypeScript/JavaScript does not align with the json-String parameter or request body in a Java controller

What is the counterpart of $.isEmptyObject({}) in Typescript for checking if an object is

Translate array into object with correct data types (type-specific method)

Error message in Visual Studio 2017: Identical name 'URLs' declared twice in

Stop the interval once the route is altered in Angular 2

Can someone explain why the Next 13 API route is showing up as empty?

Enhancing component and view functionality in Angular

Exploring the possibilities of developing WebComponents within Angular using TypeScript

Implementing try-catch logic for element visibility in Playwright using TypeScript poses limitations

Updating the checkbox status in Angular when the radio button value is changed

Updating Angular 5 Views Dynamically Using a While Loop

The Angular7 counterpart of the C# attribute decorator

Automatically adjust the model input (Signal) based on the parent and respond to any alterations in the children

Clear the input field once an item has been successfully added to the array

Deriving values in Typescript based on a subset of a union for conditional typing

Error encountered in Angular 2 with RXJS Observable: Unable to call function catch() on this.http.get(...).map(...) due to TypeError

Developing a user interface that filters out a specific key while allowing all other variable keys to be of the identical type

Encountering issues while attempting to utilize pdf2json in a TypeScript environment