Creating an object type that accommodates the properties of all union type objects, while the values are intersections, involves a unique approach

Question

Creating an object type that accommodates the properties of all union type objects, while the values are intersections, involves a unique approach

How can I create a unified object type from multiple object unions, containing all properties but with intersecting values?

For example, I want to transform the type

{ foo: 1 } | { foo: 2; bar: 3 } | { foo: 7; bar: 8 }

into the type {foo: 1 | 2 | 7; bar: 3 | 8}.

Note: Instead of creating an intersection like {foo: 1 | 2} & {bar: 3}, I aim to generate a single object type.

I've developed a type called ComplexUnionToIntersection to achieve this. However, it currently disregards properties that don't exist in all objects within the union (such as `bar` in my examples).

Here is the code snippet:

/**
 * More info: https://fettblog.eu/typescript-union-to-intersection/
 */
export type UnionToIntersection<U> = (
    U extends any ? (k: U) => void : never
) extends (k: infer I) => void
    ? I
    : never;

/**
 * Target type
 */
export type ComplexUnionToIntersection<U> = { o: U } extends { o: infer X }
    ? {
            [K in keyof (X & U)]: (X & U)[K];
      }
    : UnionToIntersection<U>;

Test cases:

// TODO: test case should result in `{foo: 1 | 2; bar: 3}`
type testCase1 = ComplexUnionToIntersection<{ foo: 1 } | { foo: 2; bar: 3 }>; // currently returns `{ foo: 1 | 2; }`

// TODO: test case should result in `{foo: 1 | 2 | 7; bar: 3 | 8}`
type testCase2 = ComplexUnionToIntersection<
    { foo: 1 } | { foo: 2; bar: 3 } | { foo: 7; bar: 8 }
>;

// TODO: test case should result in `{foo: 1 | 2; bar: 3 | 8}`
type testCase3 = ComplexUnionToIntersection<
    { foo: 1 } | { foo: 2; bar: 3 } | { bar: 8 }
>;

// TODO: test case should result in `{foo?: 1 | 2; bar: 3 | 8}`
type testCase4 = ComplexUnionToIntersection<
    { foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }
>;

Access TS Playground here

typescript

Answer 1

Answer №1

In order to consolidate a variety of object types into a single object type, where each property key from any input union member will be present in the resulting type along with the combined value type for that key across all input members, including optional properties if they exist in any input.

If we simply merge the union into a single object type directly, we face the issue where a property will only show up in the output if it appears in every input, while maintaining correct property types. One solution is to enhance each union member by adding all keys present in any member that might be missing, assigning them the 'never' type which gets absorbed in any union.

For instance, starting with:

{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }

We then augment each union member to include all keys like:

{ foo: 1; bar: never } | { foo?: 2; bar: 3 } | { foo: never; bar: 8 }

Next step is to merge this augmented union into a single object like:

{ foo?: 1 | 2 | never; bar: never | 3 | 8 }

which simplifies to

{ foo?: 1 | 2; bar: 3 | 8 }

Let's implement this:

type AllProperties<T> = T extends unknown ? keyof T : never

type AddMissingProperties<T, K extends PropertyKey = AllProperties<T>> =
    T extends unknown ? (T & Record<Exclude<K, keyof T>, never>) : never;

type MergeObjects<T> = { [K in keyof AddMissingProperties<T>]: AddMissingProperties<T>[K] }

The AllProperties<T> type captures all keys from union members using a distributive conditional type:

type TestAllProperties = AllProperties<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
// type TestAllProperties = "foo" | "bar"

The AddMissingProperties<T, K> type follows the same pattern, by incorporating any absent keys from K into each union element and assigning them the 'never' type, defaulting K to AllProperties<T>:

type TestAddMissingProperties = AddMissingProperties<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
/* type TestAddMissingProperties = 
    ({ foo: 1; } & Record<"bar", never>) | 
    ({ foo?: 2 | undefined; bar: 3; } & Record<never, never>) | 
    ({ bar: 8; } & Record<"foo", never>) */

This gives the equivalent result as mentioned above, albeit in a different format. The structure doesn't impact further processing of the type.

Lastly, the MergeObjects<T> type acts as an identity mapped type over AddMissingProperties<T>, iterating through each property to generate a unified object output:

type TestMergeObjects = MergeObjects<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
/* type TestMergeObjects = {
    foo?: 1 | 2 | undefined;
    bar: 3 | 8;
} */

Everything seems to be in order!

Explore the code on TypeScript Playground

Answer 2

In order to consolidate a variety of object types into a single object type, where each property key from any input union member will be present in the resulting type along with the combined value type for that key across all input members, including optional properties if they exist in any input.

If we simply merge the union into a single object type directly, we face the issue where a property will only show up in the output if it appears in every input, while maintaining correct property types. One solution is to enhance each union member by adding all keys present in any member that might be missing, assigning them the 'never' type which gets absorbed in any union.

For instance, starting with:

{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }

We then augment each union member to include all keys like:

{ foo: 1; bar: never } | { foo?: 2; bar: 3 } | { foo: never; bar: 8 }

Next step is to merge this augmented union into a single object like:

{ foo?: 1 | 2 | never; bar: never | 3 | 8 }

which simplifies to

{ foo?: 1 | 2; bar: 3 | 8 }

Let's implement this:

type AllProperties<T> = T extends unknown ? keyof T : never

type AddMissingProperties<T, K extends PropertyKey = AllProperties<T>> =
    T extends unknown ? (T & Record<Exclude<K, keyof T>, never>) : never;

type MergeObjects<T> = { [K in keyof AddMissingProperties<T>]: AddMissingProperties<T>[K] }

The AllProperties<T> type captures all keys from union members using a distributive conditional type:

type TestAllProperties = AllProperties<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
// type TestAllProperties = "foo" | "bar"

The AddMissingProperties<T, K> type follows the same pattern, by incorporating any absent keys from K into each union element and assigning them the 'never' type, defaulting K to AllProperties<T>:

type TestAddMissingProperties = AddMissingProperties<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
/* type TestAddMissingProperties = 
    ({ foo: 1; } & Record<"bar", never>) | 
    ({ foo?: 2 | undefined; bar: 3; } & Record<never, never>) | 
    ({ bar: 8; } & Record<"foo", never>) */

This gives the equivalent result as mentioned above, albeit in a different format. The structure doesn't impact further processing of the type.

Lastly, the MergeObjects<T> type acts as an identity mapped type over AddMissingProperties<T>, iterating through each property to generate a unified object output:

type TestMergeObjects = MergeObjects<{ foo: 1 } | { foo?: 2; bar: 3 } | { bar: 8 }>
/* type TestMergeObjects = {
    foo?: 1 | 2 | undefined;
    bar: 3 | 8;
} */

Everything seems to be in order!

Explore the code on TypeScript Playground

Creating an object type that accommodates the properties of all union type objects, while the values are intersections, involves a unique approach

Answer №1

Similar questions

Is it possible to begin the vue root instance by using a .vue class component?

Issue encountered with the inability to successfully subscribe to the LoggedIn Observable

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

Develop a variety of Jabber client echo bots

Utilizing ngFor to iterate over items within an Observable array serving as unique identifiers

Retrieving child elements from parent identifiers using Typescript

What is the best way to incorporate the C# in keyword into TypeScript?

Is there a way for me to simultaneously run a typescript watch and start the server?

The cause of Interface A improperly extending Interface B errors in Typescript

Unspecified parameter for Next.js dynamic route

What is the process for turning off deep imports in Tslint or tsconfig?

Can one mimic a TypeScript decorator?

How can I detect if a control value has been changed in a FormGroup within Angular 2? Are there any specific properties to look

A Typescript Function for Generating Scalable and Unique Identifiers

How can an array be generated functionally using properties from an array of objects?

Step-by-step guide to initializing data within a service during bootstrap in Angular2 version RC4

Issue: Unable to link with 'dataSource' as it is not a recognized feature of 'mat-tree'

Setting up grunt-ts to function seamlessly with LiveReload

What could be the reason for TypeScript inferring the generic type as an empty string?

Transforming a JavaScript chained setter into TypeScript