Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Question

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

class Base {}

function log(arg: number) {
    console.log(arg);
}

function fn<T extends typeof Base>(
    instance: Partial<InstanceType<T>>,
    key: keyof InstanceType<T>,
) {
    const val = instance[key];
    if (val) {
        log(val);
    }
}

Check out the code in the TS Playground: here

The issue arises when trying to assign 'undefined' to a parameter that expects a 'number.' This can be solved by using the nullish coalescing operator like so: log(val ?? 0).

It may seem surprising that log(val ?? 0) works, as val could potentially be a truthy value that is not a number. However, TypeScript does not throw an error in this scenario.

javascript typescript

Answer 1

Answer №1

This issue has been widely recognized. For a deeper understanding of what's happening within the type checker, you can refer to this insightful comment:

The main problem lies in the fact that the narrowed type of fooAnchor is quite complex. The original type is Partial<FooAnchorMap>[keyof TMap], which doesn't simplify neatly into a type that can be definitively assigned to HTMLElement.

Efforts are underway with this ongoing work to address the issue. In the meantime, only temporary solutions exist.

function fn<T extends typeof Base>(
    instance: Partial<InstanceType<T>>,
    key: keyof InstanceType<T>,
) {
    const val: InstanceType<T>[keyof InstanceType<T>] | undefined = instance[key];
    if (val) {
        log(val);
    }
}

Link to playground

You will encounter the following error message:

 Type 'InstanceType<T>[string]' is not assignable to type 'number'.

Answer 2

This issue has been widely recognized. For a deeper understanding of what's happening within the type checker, you can refer to this insightful comment:

The main problem lies in the fact that the narrowed type of fooAnchor is quite complex. The original type is Partial<FooAnchorMap>[keyof TMap], which doesn't simplify neatly into a type that can be definitively assigned to HTMLElement.

Efforts are underway with this ongoing work to address the issue. In the meantime, only temporary solutions exist.

function fn<T extends typeof Base>(
    instance: Partial<InstanceType<T>>,
    key: keyof InstanceType<T>,
) {
    const val: InstanceType<T>[keyof InstanceType<T>] | undefined = instance[key];
    if (val) {
        log(val);
    }
}

Link to playground

You will encounter the following error message:

 Type 'InstanceType<T>[string]' is not assignable to type 'number'.

Answer 3

Answer №2

The undefined concept is a distraction; the issue here is due to the enabled setting of strictNullChecks. This means that unless you specify

function log(arg: number) {
    console.log(arg);
}

as

function log(arg: number | undefined) {
    console.log(arg);
}

you will receive an error whenever passing in anything that could potentially result in undefined. Disabling strictNullChecks would resolve this particular error (while possibly introducing others with the given code); alternatively, ensuring that undefined is handled before being passed in (e.g. ?? 0) can also address it.

I find it interesting that log(val ?? 0) seems to work. If val is a non-numeric truthy value, shouldn't this cause an error since log() expects a number input?

If val ?? 0 does not result in a number and log() requires a number input, it should indeed trigger an error in the scenario where a non-numeric truthy value is supplied. This behavior correctly triggers an error in my experience on the playground. Can you provide an example where it behaves differently?

Answer 4

The undefined concept is a distraction; the issue here is due to the enabled setting of strictNullChecks. This means that unless you specify

function log(arg: number) {
    console.log(arg);
}

as

function log(arg: number | undefined) {
    console.log(arg);
}

you will receive an error whenever passing in anything that could potentially result in undefined. Disabling strictNullChecks would resolve this particular error (while possibly introducing others with the given code); alternatively, ensuring that undefined is handled before being passed in (e.g. ?? 0) can also address it.

I find it interesting that log(val ?? 0) seems to work. If val is a non-numeric truthy value, shouldn't this cause an error since log() expects a number input?

If val ?? 0 does not result in a number and log() requires a number input, it should indeed trigger an error in the scenario where a non-numeric truthy value is supplied. This behavior correctly triggers an error in my experience on the playground. Can you provide an example where it behaves differently?

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Answer №1

Answer №2

Similar questions

FFmpeg: audio synchronization issue observed with simultaneous usage of xfade and acrossfade techniques

Looking for guidance on where to find a functional code sample or comprehensive tutorial on working with ViewMetadata in Angular2

Unable to access filteredItems from custom popup in uib-typeahead retrieval process

When attempting to click on the dropdown in Bootstrap, there is no content displayed

Verify the Ajax submission of a post request prior to transmitting any data

Expandable full-width JavaScript accordion for seamless navigation

Innovative concepts for designing web applications

Swapping React Components with a Click of a Button

Change the color of the navbar when scrolling using bootstrap and jquery

Issue: setAllcategories function not found

Tips for making jQuery DataTables switch between multiple DOM tables?

The PKIJS digital signature does not align with the verification process

Fetching database entries upon page load instead of using the keyup function in JavaScript

Ways to add elements to the DOM using jQuery from the local storage?

Incorporating the values of JavaScript objects into a global variable

Exploring the possibilities of integrating jQuery into Firefox extensions

Unable to delete touchmove event - Vue watching system

Possibility for using navigator.GetUserMedia in Internet Explorer

Using PHP to dynamically change the title of a Bootstrap modal

Executing Javascript requests on a php server hosted on the web