Many times we may come across the error message “object is possibly undefined” in TypeScript or Angular. The reason for the error message is because of the Strict Null Check feature of TypeScript. Here TypeScript is basically telling the developer that a variable can possibly undefined or null, so write some code to handle if the value is undefined or null.

Example:

Suppose we have a very simple function declaration like this

function myFunction(a: number, b?: number): number {
    return (a * b);
}

When we run the code containing above function declaration, then we get the runtime error message object is possibly ‘undefined’.

In this example, since we made the second parameter b as optional, we may or may not pass a value to it during the function call. So, if we call the function like myFunction(10), then the value of b will be undefined.

To solve this problem, basically we need to handle the code if the value of b is undefined, which can be done in multiple ways.

Solution 1:

We can assign a default value to b

example:

function myFunction(a: number, b: number = 20): number {
    return (a * b);
}

If you are getting the error in a different scenario such as while creating a component inside an Angular application, then you can give a default value during property declaration or you can assign a value inside the constructor.

Solution 2:

By using the bang(!) operator

When we use Bang(!) operator, we are explicitly telling TypeScript that the variable to which we added the operator will not be null or undefined. Though I do not recommend this way, it can be used to suppress the error message.

example:

function myFunction(a: number, b?: number): number {
    return (a * b!);
}

Solution 3:

By using an If statement.

We can simply use an if statement to handle the situation where b is undefined.

example:

function myFunction(a: number, b?: number): number {
    if (b == undefined) {
        return 200;
    } else {
        return (a * b);
    }
}

We can also use the other variants of if statements such as ternary operator or nullish coalescing operator (??).

Please note that, this error can occur in many different scenarios. The reason for the error message will be same everywhere, but, how to handle it can vary depending on the place where we got it.