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

What is the best way to integrate Tawk.to into a React application while using typescript?

Steps to add annotations to a class descriptor:

Having trouble installing npm package in Angular project

How Typescript Omit/Pick erases Symbols in a unique way

Tips for neatly wrapping a class constructor

How can I adjust the column width in OfficeGen?

Leveraging Renderer in Angular 4

Import JSON data into Angular 2 Component

Ways to switch up the titles on UploadThing

Here's a revised version: "How to link a lambda layer with a function in a serverless.ts file using the

Unable to make a reference to this in TypeScript

Mozilla struggles to interpret JSON data

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

The React component fails to load due to the discrepancies in the data retrieved from various asynchronous requests

Finding the current URL in React Router can be achieved by using specific methods and properties provided by

How can we effectively utilize LESS variables in styles.less when working with LESS files within components in Angular versions 6 or 7?

"Transforming a callback function to an asynchronous function results in an error

Customizable TypeScript interface with built-in default key value types that can be easily extended

Enable users to designate custom methods as either asynchronous or synchronous

Error in pagination when using MAX() function in PostgreSQL query