The use of conditional mapping with unions can render functions uninvokable

Question

The use of conditional mapping with unions can render functions uninvokable

type Container<T> = T extends any[] ? ArrayContainer<T> : ObjectContainer<T>

type ArrayContainer<T> = {
  set(arr: T, index: number): void
}

type ObjectContainer<T> = {
  set(obj: T): void
}

const testContainer = {} as any as Container<{ boxedNumber: number } | number>

// This code snippet fails to compile due to the conditional type returning an incompatible type for a function call on ObjectContainer.

<p>The conditional logic chose to return either ObjectContainer<{ boxedNumber: number }> or ObjectContainer<number>, creating difficulty in invoking any functions from ObjectContainer.</p>

<p>Are there alternative methods to force the return of ObjectContainer<{ boxedNumber: number } | number>?</p>

<p>This issue is being addressed using the most recent version 2.8 release.</p>

typescript

Answer 1

Answer №1

As mentioned by @TitianCernicovaDragomir, the issue at hand revolves around conditional types with a bare type parameter T in T extends XXX ? YYY : ZZZ distributing over a union within T. Although this behavior is by design, there exists a commonly used workaround: encapsulating both T and XXX into a one-tuple like so - [T] extends [XXX] ? YYY : ZZZ. This adjustment removes the dependency on a bare type parameter and prevents the breakage of the union. It's likely to remain operational and supported since it comes endorsed by @ahejlsberg, the primary mind behind conditional types in TypeScript as per this source.

In your specific scenario, you could implement it as follows:

type Container<T> = [T] extends [any[]] ? ArrayContainer<T> : ObjectContainer<T>

This will interpret Container<string | number> as

ObjectContainer<string | number>

, aligning with your desired outcome.

However, please note that

Container<string | number[]>

will be interpreted as

ObjectContainer<string | number[]>

, given that string | number[] isn't inherently an array. Is this acceptable? Should it be

ObjectContainer<string> | ArrayContainer<number[]>

? Or perhaps

ObjectContainer<string> & ArrayContainer<number[]>

? The ideal approach remains uncertain.

Hopefully, this provided clarity and best of luck navigating through it.

Answer 2

As mentioned by @TitianCernicovaDragomir, the issue at hand revolves around conditional types with a bare type parameter T in T extends XXX ? YYY : ZZZ distributing over a union within T. Although this behavior is by design, there exists a commonly used workaround: encapsulating both T and XXX into a one-tuple like so - [T] extends [XXX] ? YYY : ZZZ. This adjustment removes the dependency on a bare type parameter and prevents the breakage of the union. It's likely to remain operational and supported since it comes endorsed by @ahejlsberg, the primary mind behind conditional types in TypeScript as per this source.

In your specific scenario, you could implement it as follows:

type Container<T> = [T] extends [any[]] ? ArrayContainer<T> : ObjectContainer<T>

This will interpret Container<string | number> as

ObjectContainer<string | number>

, aligning with your desired outcome.

However, please note that

Container<string | number[]>

will be interpreted as

ObjectContainer<string | number[]>

, given that string | number[] isn't inherently an array. Is this acceptable? Should it be

ObjectContainer<string> | ArrayContainer<number[]>

? Or perhaps

ObjectContainer<string> & ArrayContainer<number[]>

? The ideal approach remains uncertain.

Hopefully, this provided clarity and best of luck navigating through it.

Answer 3

Answer №2

The issue arises when conditional types iterate through the types within a union and apply conditions to each element separately, resulting in the combination of those results. For example,

Container<{ boxedNumber: number } | number>

will produce

ObjectContainer<number> | ObjectContainer<{ boxedNumber: number; }>

, rather than

ObjectContainer<number | { boxedNumber: number; }>

.

To achieve the desired outcome similar to

Container<number | { boxedNumber: number }>

, you can create an intersection type with

Container<{ boxedNumber: number }>

and Container.

const testContainer = {} as any as Container<{ boxedNumber: number }> & Container<number>
testContainer.set(33)
testContainer.set({ boxedNumber: 19})

Answer 4

The issue arises when conditional types iterate through the types within a union and apply conditions to each element separately, resulting in the combination of those results. For example,

Container<{ boxedNumber: number } | number>

will produce

ObjectContainer<number> | ObjectContainer<{ boxedNumber: number; }>

, rather than

ObjectContainer<number | { boxedNumber: number; }>

.

To achieve the desired outcome similar to

Container<number | { boxedNumber: number }>

, you can create an intersection type with

Container<{ boxedNumber: number }>

and Container.

const testContainer = {} as any as Container<{ boxedNumber: number }> & Container<number>
testContainer.set(33)
testContainer.set({ boxedNumber: 19})

Answer 5

Answer №3

Looks like you may be missing a necessary type parameter.

type Container<T, R> = T extends any[] ? ArrayContainer<R> : ObjectContainer<R>;

type ArrayContainer<T> = {
  set(arr: T, index: number): void
}

type ObjectContainer<T> = {
  set(obj: T): void
}

const exampleContainer = {} as Container<{}, number>;
exampleContainer.set(10);

Answer 6

Looks like you may be missing a necessary type parameter.

type Container<T, R> = T extends any[] ? ArrayContainer<R> : ObjectContainer<R>;

type ArrayContainer<T> = {
  set(arr: T, index: number): void
}

type ObjectContainer<T> = {
  set(obj: T): void
}

const exampleContainer = {} as Container<{}, number>;
exampleContainer.set(10);

The use of conditional mapping with unions can render functions uninvokable

Answer №1

Answer №2

Answer №3

Similar questions

Step-by-step guide on adding a command to a submenu through the vscode extension api

When the nestjs interface appears to be missing a defined method

Angular has been modified after being verified. The earlier value was 'null'

Tips for programmatically focusing on a v-textarea using Vuetify and TypeScript

What is the process of developing or expanding a custom component with unique properties?

Exploring the Solution for Connecting Angular FormArray with mat-select options and input fields

In ReactJS with TypeScript, declaring a constant response after calling the login function using the await keyword

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Is it possible to maintain the input and output types while creating a function chain factory in

React and TypeScript are not in sync: Expecting 0 arguments, but receiving 1 in a useReducer function

Windows authentication login only appears in Chrome after opening the developer tools

What is the proper way to declare app.use using TypeScript with the node.js Express module?

Increasing a value within HTML using TypeScript in Angular

Incorporate form information into an array in Angular Version 2 or higher

Displaying Ionic React Component only after button click spectacle

What is causing VSCode's TypeScript checker to overlook these specific imported types?

There is a potential for the object to be 'undefined' when calling the getItem method on the window's local storage

Managing asynchronous data using rxjs

The pagination, sorting, and filtering features in my Angular Material project seem to be malfunctioning

Having trouble executing the project using Gulp