Exploring Typescript: Combining types (rather than intersecting them)

Question

Exploring Typescript: Combining types (rather than intersecting them)

Let's analyze the scenario below

type MergeFn = <K1 extends string, V1, K2 extends string, V2>(
   k1: K1, v1: V1,
   k2: K2, v2: V2
) => ???

let mergeFn: MergeFn // actual implementation doesn't matter for this question

What should be replaced in place of ??? so that

mergeFn(
  "hello", 1,
  "typescript", 2
)

results in

{ hello: number, typescript: number }

.

I attempted to use

??? = { [k in K1]: V1 } & { [k in K2]: V2 }

however, it only yields

{ hello: number } & { typescript: number }

.

(Even applying

type Id<T> = { [k in keyof T]: T[k] }

as suggested here did not provide a solution.)

Try out the example in the TypeScript playground

typescript generics typescript-typings

Answer 1

Answer №1

If you want to simplify the process, consider using a single conditional mapped type instead of an intersection:

type CombineFn = <Key1 extends string, Value1, Key2 extends string, Value2>(
    key1: Key1, value1: Value1,
    key2: Key2, value2: Value2
) => { [K in Key1 | Key2]: K extends Key1 ? Value1 : Value2}

This will generate:

const example = combineFn(
    "hello", 6,
    "world", 3
)
/* const example: {
    hello: number;
    world: number;
} */

If you found that Id<T> didn't provide the expected outcome, you can bypass it by introducing an intermediate conditional type like so:

type Extract<T> = T extends infer U ? { [K in keyof U]: U[K] } : never

Using this with your initial code:

type CombineFn = <Key1 extends string, Value1, Key2 extends string, Value2>(
    key1: Key1, value1: Value1,
    key2: Key2, value2: Value2
) => Extract<Record<Key1, Value1> & Record<Key2, Value2>>

You'll get the same result as before:

const example = combineFn(
    "hello", 6,
    "world", 3
)
/* const example: {
    hello: number;
    world: number;
} */

Both methods should work for you.

Hopefully this guidance proves useful! Best of luck!

Link to code

Answer 2

If you want to simplify the process, consider using a single conditional mapped type instead of an intersection:

type CombineFn = <Key1 extends string, Value1, Key2 extends string, Value2>(
    key1: Key1, value1: Value1,
    key2: Key2, value2: Value2
) => { [K in Key1 | Key2]: K extends Key1 ? Value1 : Value2}

This will generate:

const example = combineFn(
    "hello", 6,
    "world", 3
)
/* const example: {
    hello: number;
    world: number;
} */

If you found that Id<T> didn't provide the expected outcome, you can bypass it by introducing an intermediate conditional type like so:

type Extract<T> = T extends infer U ? { [K in keyof U]: U[K] } : never

Using this with your initial code:

type CombineFn = <Key1 extends string, Value1, Key2 extends string, Value2>(
    key1: Key1, value1: Value1,
    key2: Key2, value2: Value2
) => Extract<Record<Key1, Value1> & Record<Key2, Value2>>

You'll get the same result as before:

const example = combineFn(
    "hello", 6,
    "world", 3
)
/* const example: {
    hello: number;
    world: number;
} */

Both methods should work for you.

Hopefully this guidance proves useful! Best of luck!

Link to code

Exploring Typescript: Combining types (rather than intersecting them)

Answer №1

Similar questions

Enable the generation of scss.d.ts files with Next.js

Excluding properties based on type in Typescript using the Omit or Exclude utility types

The NavBar element is failing to update when the state changes

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

Angular: encountering template parse errors with unknown <component> element

script not found: typings-install

The name 'Firebase' is not recognized by Typescript

The type '{}' does not contain a property named 'map'

I encountered an issue with Typescript Jest where it was unable to find the mock or mockReturnedValue functions on the types I

Troubleshooting: Angular input binding issue with updating

Body not being checked for overloads

Triggering an event from a higher-level component to a lower-level component

Enhancing Type Safety in Typescript through Key/Property Type Guards

Dealing with a multi-part Response body in Angular

Error Encountered While Building AWS Amplify with Ionic 5 and Angular 10

The Google Books API has reached its limit for requests

Guide to Angular Interface Styling - Ambiguous Suggestions

`Developing reusable TypeScript code for both Node.js and Vue.js`

Show blank value if there are no search results, along with an additional menu option

Do you think it's wise to utilize React.Context for injecting UI components?