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

Instead of using a string in the createTextNode() function, consider utilizing a variable

Steps to effectively pass parameters in a function object literal

The Puppeteer software does not automatically shut down the browser once the task is complete

A Greasemonkey script for organizing and categorizing webpage elements

Utilize RequireJS to modularize scripts in an organized manner

Using TypeScript with AWS Lambda: To package imports or not to package? Alternatively: Error in Runtime.ImportModule: Module '@aws-sdk/...' not found

Having trouble sending specific data using the jQuery Form Plugin ajaxForm feature

Using JavaScript to insert a value through AJAX

How can I personalize a Leaflet popup with image thumbnails and additional customization options?

Adjust CardMedia Images to match their content in the new MUI 5 version

Tips for preventing CORS errors while rendering an image on a canvas

How come a colon within a function's body does not result in an error in JavaScript?

In Angular, encountering difficulty accessing object members within an array when using custom pipes

How can an array of objects be sent as a query string to the endpoint URL in React?

Is it possible to utilize hooks such as 'useState' within an async/await server component?

Javascript/jquery functions perfectly in all browsers except Firefox

Implementing a gradient effect on a specific image element within an HTML canvas with the help of jQuery

"Seamlessly Integrating AngularJS with WebGL for Stunning Canvas Inter

There is a lag in the loading of css stylesheets

Dealing with cross-origin error issues when using json.parse in React / MERN development