Potentially null object is present in a callback

Question

Potentially null object is present in a callback

The code I have is as follows:

             let ctx = ref.current.getContext("2d");
             if(ctx){
                ctx.lineWidth=1; // this line executes without errors
                ctx.strokeStyle=props.barStroke??"darkgray";// this line executes without errors
                ctx.fillStyle=props.barFill??"blue"; // this line executes without errors
                props.data.map((v,i)=>{
                    ctx.fillRect(i*10,0,10,props.height); // here it complains that ctx may be null!!
                    ctx.strokeRect(1*10,0,10,props.height);
                })

             }

While I have checked the value of ctx and found that ctx.lineWidth works fine, I encounter an error inside the callback indicating that the object could potentially be null. Interestingly, using ctx?.method allows the code to work regardless. How is it possible for ctx, confirmed as not null outside the callback, to become null inside it? Here is a link demonstrating the issue.

typescript

Answer 1

Answer №1

In reference to this issue:

The current behavior is by design. The type checker understands that `ctx` is not null when the callback function is created, but it cannot guarantee that `ctx` will still be non-null when the callback is actually executed (especially if `bar` is a mutable property that could change before or between calls).

A recommended approach to address this is to make a copy of `ctx` and use that as a constant local variable within the callback function.

Answer 2

In reference to this issue:

The current behavior is by design. The type checker understands that `ctx` is not null when the callback function is created, but it cannot guarantee that `ctx` will still be non-null when the callback is actually executed (especially if `bar` is a mutable property that could change before or between calls).

A recommended approach to address this is to make a copy of `ctx` and use that as a constant local variable within the callback function.

Answer 3

Answer №2

Give this a shot:

      let canvasContext = ref.current.getContext("2d");
         if(canvasContext) {
            canvasContext.lineWidth=1; // all good here!
            canvasContext.strokeStyle=props.barStroke??"darkgray";// all good here!
            canvasContext.fillStyle=props.barFill??"blue"; // all good here!
            props.data.map((val,index)=>{
                canvasContext.fillRect(index*10,0,10, val.height); //no error for ctx being possibly null here!!
                canvasContext.strokeRect(1*10,0,10, val.height);
            })

         }

Seems like props is not causing an issue with the reference to ctx. It's because ctx is already defined as a local variable.

Answer 4

Give this a shot:

      let canvasContext = ref.current.getContext("2d");
         if(canvasContext) {
            canvasContext.lineWidth=1; // all good here!
            canvasContext.strokeStyle=props.barStroke??"darkgray";// all good here!
            canvasContext.fillStyle=props.barFill??"blue"; // all good here!
            props.data.map((val,index)=>{
                canvasContext.fillRect(index*10,0,10, val.height); //no error for ctx being possibly null here!!
                canvasContext.strokeRect(1*10,0,10, val.height);
            })

         }

Seems like props is not causing an issue with the reference to ctx. It's because ctx is already defined as a local variable.

Answer 5

Answer №3

To gain insights into the reason behind this issue, please refer to Matthieu Riegler's explanation. An alternative approach is to implement a `for` loop instead of using a callback, as TypeScript may not accurately detect when the callback is invoked within the `.map` function, hence causing the problem:

let ctx = document.querySelector<HTMLCanvasElement>('foo')!.getContext("2d");
if (ctx) {
    const props = {
        data: ['x', 'y'],
        height: 10
    }
    for (const [i, v] of props.data.entries()) {
        ctx.fillRect(i * 10, 0, 10, props.height);
        ctx.strokeRect(1 * 10, 0, 10, props.height);
    }
}

Answer 6

To gain insights into the reason behind this issue, please refer to Matthieu Riegler's explanation. An alternative approach is to implement a `for` loop instead of using a callback, as TypeScript may not accurately detect when the callback is invoked within the `.map` function, hence causing the problem:

let ctx = document.querySelector<HTMLCanvasElement>('foo')!.getContext("2d");
if (ctx) {
    const props = {
        data: ['x', 'y'],
        height: 10
    }
    for (const [i, v] of props.data.entries()) {
        ctx.fillRect(i * 10, 0, 10, props.height);
        ctx.strokeRect(1 * 10, 0, 10, props.height);
    }
}

Potentially null object is present in a callback

Answer №1

Answer №2

Answer №3

Similar questions

How to extract multiple literals from a string using Typescript

Generating a custom type in Typescript based on specific array keys

What is the best way to insert information into my SQLite database?

Challenges when building a production version of an Expo app with Typescript

Failure to trigger the callback for mongoose.connection.once('open') event

Loop through object properties with *ngFor

Retrieve data from a URL using Angular 6's HTTP POST method

Implementing dynamic data updates for the yAxis in a chart using Highcharts and Angular 2/4

Creating a digital collection using Vue, Typescript, and Webpack

The parameter type ‘DocumentData’ cannot be assigned to type ‘never’ in this argument

Version 4.0 of d3 introduces an import statement that provides a __moduleExports wrapper

What is the best way to restrict the maximum number of items stored in local storage?

What could be causing my "Swiper" component to malfunction in a TypeScript React project?

The function, stored as state within a context provider, is experiencing only one update

Creating a consistent template for typing TypeScript generics

What is the best way to connect input values with ngFor and ngModel?

The Subscribe function in Angular's Auth Guard allows for dynamic authorization

What is the maximum allowable size for scripts with the type text/json?

Is there a way to ensure a consistent return value when using exhaustive switch-case statements?

Make sure the subset interface is selected from the interface / Choose PickDeep<>?