Mapping objects in Typescript to create a union of objects

Question

Mapping objects in Typescript to create a union of objects

I have been working on some TypeScript code and I seem to be having trouble getting it to work as expected. It would be greatly appreciated if someone could help me understand what I'm doing wrong or suggest a different approach.

Let's assume I have a Definition that consists of a function named name and data.

interface Definition<TName extends string, TData extends any> {
  name: TName;
  data: TData;
}

The Definition eventually transforms into an Action. The Action includes a function called method</code with <code>payload as the first parameter type.

interface Action<TDefinition extends Definition<string, any>> {
  name: TDefinition["name"];
  method: (data: TDefinition["data"]) => void;
}

It is essential for all elements of the Definition union to pass through the Changer.

interface Changer<TDefinition extends Definition<string, any>> {
  actions: Action<TDefinition>[];
}

...

What are your thoughts?

typescript generics types

Answer 1

Answer №1

To tackle this issue, one can utilize distributive conditional types.

interface Changer<TDefinition extends Definition<string, any>> {
  actions: (
    TDefinition extends infer U extends Definition<string, any> 
      ? Action<U> 
      : never
  )[];
}

The objective is to transform the type of actions from

actions: Action<Definition<"one", 1> | Definition<"two", 2>>[]

to

actions: (Action<Definition<"one", 1>> | Action<Definition<"two", 2>>)[]

This transformation entails coercing the union elements of TDefinition to be distributed by a conditional into individual Actions.

Playground

Now the functions have the correct parameter types.

const set: Changer<Definition<"one", 1> | Definition<"two", 2>> = {
  actions: [
    {
      name: "one",
      method: (data) => data, // data: 1
    },
    {
      name: "two",
      method: (data) => data // data: 2
    }
  ],
};

However, attempting to execute this line will result in an error:

set.actions[0].method(1); // Argument of type 'number' is not assignable to parameter of type 'never'

The issue arises because the set variable lacks details about individual array elements due to its explicit type. To address this, consider creating the set using a generic function.

Answer 2

To tackle this issue, one can utilize distributive conditional types.

interface Changer<TDefinition extends Definition<string, any>> {
  actions: (
    TDefinition extends infer U extends Definition<string, any> 
      ? Action<U> 
      : never
  )[];
}

The objective is to transform the type of actions from

actions: Action<Definition<"one", 1> | Definition<"two", 2>>[]

to

actions: (Action<Definition<"one", 1>> | Action<Definition<"two", 2>>)[]

This transformation entails coercing the union elements of TDefinition to be distributed by a conditional into individual Actions.

Playground

Now the functions have the correct parameter types.

const set: Changer<Definition<"one", 1> | Definition<"two", 2>> = {
  actions: [
    {
      name: "one",
      method: (data) => data, // data: 1
    },
    {
      name: "two",
      method: (data) => data // data: 2
    }
  ],
};

However, attempting to execute this line will result in an error:

set.actions[0].method(1); // Argument of type 'number' is not assignable to parameter of type 'never'

The issue arises because the set variable lacks details about individual array elements due to its explicit type. To address this, consider creating the set using a generic function.

Mapping objects in Typescript to create a union of objects

Answer №1

Similar questions

What is the significance of incorporating 'Actions' as data within the Redux framework?

Angular application experiencing issues with opening snackbar notifications

What is the best way to implement multiple templates for a single component?

Creating an interface and setting a default value

The metadata for Company#companyTypesLinks could not be located. Please verify that the entity object has been correctly specified

Retrieving data from an API using VUEJS3 and Typescript

Is it possible to import in TypeScript using only the declaration statement?

How to display a nested array in TypeScript following a specific structure

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array

tsc is not recognizing the configurations in my tsconfig.json file

The source files are expected to be contained within the 'rootDir' directory, which is not located at 'c:/Users/hasit/Desktop/typescript/src'

What is the process for discovering the kinds of models that can be generated with a Prisma client?

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

Tips on injecting configuration into forRoot

Can you identify the specific function type passed through props?

Displaying messages in an Angular 2 chatbox from the bottom to the top

Limit the typescript generic type to only a singular string literal value, preventing the use of unions

Modify the style of an element using a media query and Angular 4

Adding a custom role in Angular TypeScript in Microsoft AppInsights is a straightforward process that can provide valuable

TypeScript maintains the reference and preserves the equality of two objects