Why does the order of the conditional check impact how function arguments are restricted when undefined?

Question

Why does the order of the conditional check impact how function arguments are restricted when undefined?

I created a TypeScript function that enforces a rule where a function must accept either zero or two arguments, but not just one. In other words, if the first argument is passed in, the second parameter becomes required.

Here is how the function looks like:

function bar<T, P>(a?: undefined extends P ? never : T, b?: P) { }

bar('') // This will result in an error, which is the intended behavior.

Initially, I had the conditional type set up differently, but it didn't work as expected:

function bar<T, P>(a?: P extends undefined ? never : T, b?: P) { }

bar('') // Surprisingly, this was considered okay, even though it shouldn't be.

When the second argument (P) is not provided, it defaults to undefined, which does indeed extend undefined. So why doesn't P extends undefined work in this case?

Check out the Playground here.

typescript

Answer 1

Answer №1

It is important to note that the order of the check in a conditional type holds significance as X extends Y and Y extends X are distinct. This scenario assumes that P is not inferred as undefined, making both checks of undefined extends undefined unsurprisingly different. The issue arises when no value of type P is passed for b, causing inference for P to fail completely.

In cases where type argument inference fails, the default type argument or constraints come into play. For unconstrained type parameters like P, the implicit constraint is set to unknown. As a result, P is instantiated with unknown.

Due to the nature of how unknown behaves as the top type in TS, you observe differing behavior between foo() and bar().

To ensure inference failure of P defaults to undefined, setting undefined as the default type argument is recommended:

function foo<T, P = undefined>(a?: P extends undefined ? never : T, b?: P) { }
foo(''); // error
function bar<T, P = undefined>(a?: undefined extends P ? never : T, b?: P) { }
bar(''); // error

With P now defined as undefined, consistency is achieved in behavior across both cases by ensuring undefined extends undefined evaluates true.

Click here for the Playground link.

Answer 2

It is important to note that the order of the check in a conditional type holds significance as X extends Y and Y extends X are distinct. This scenario assumes that P is not inferred as undefined, making both checks of undefined extends undefined unsurprisingly different. The issue arises when no value of type P is passed for b, causing inference for P to fail completely.

In cases where type argument inference fails, the default type argument or constraints come into play. For unconstrained type parameters like P, the implicit constraint is set to unknown. As a result, P is instantiated with unknown.

Due to the nature of how unknown behaves as the top type in TS, you observe differing behavior between foo() and bar().

To ensure inference failure of P defaults to undefined, setting undefined as the default type argument is recommended:

function foo<T, P = undefined>(a?: P extends undefined ? never : T, b?: P) { }
foo(''); // error
function bar<T, P = undefined>(a?: undefined extends P ? never : T, b?: P) { }
bar(''); // error

With P now defined as undefined, consistency is achieved in behavior across both cases by ensuring undefined extends undefined evaluates true.

Click here for the Playground link.

Why does the order of the conditional check impact how function arguments are restricted when undefined?

Answer №1

Similar questions

Updating an array using `setState` does not result in the array being updated

Is it possible to link multiple references to a single Element/Node?

How to enable Autocomplete popper to expand beyond the menu boundaries in Material UI

Parent/Child Relationships in Typescript

Learn how to utilize webpack for bundling a TypeScript library into a JavaScript script

Typescript Nested Class (also known as Angular Private Inner Interface)

Nested formArrays within formArrays in Angular 4

Unable to set a breakpoint within Angular constructor or OnInit method

What's with all the requests for loaders on every single route?

Using MUI ClickAwayListener to automatically close the modal upon clicking in React.Js

What is the best way to invoke a function in a functional React component from a different functional React component?

Bypass VueJs Typescript errors within the template section with Typescript

inject a dynamic loading icon within the choices of a datalist in an Angular application

Conceal the HTML element within a subscription

Exploring the concept of class type definition in Typescript can lead to an

Module not located following the completion of project compilation

Struggling to compile a next.js application using both typescript and sass

Creating TypeScript interfaces from Laravel backend

I'm experiencing difficulties in establishing a connection from Ionic to my remote database

Generating an Asynchronous Observable using an array within a service and displaying the results in the template