“Object is possibly ‘null’ or ‘undefined'” Error In TypeScript – How To Fix

In this tutorial, we will show you how to fix the “Object is possibly ‘null’ or ‘undefined'” error in TypeScript. The error often occurs when we try to access a variable or property that might have the value of ‘null’ or ‘undefined’. There are various ways to fix it, and we will show some common ones in this instruction. 

What causes the “Object is possibly ‘null’ or ‘undefined'” error in TypeScript?

Reproduce the “Object is possibly ‘null’ or ‘undefined'” error in TypeScript

Let’s take a look at some examples: 

Example 1: 

var myNum: number | null | undefined;
console.log(myNum.toString());

As we run the code, we will get into this error:

Output: 

'myNum' is possibly 'null' or 'undefined'.

Example 2:

type Car = {
	date?: {
        month: string;
        year: number;
    } | null;
    brand: string;
    color: string;
}

const car: Car = {
    'date': {
        'month': 'September',
        'year': 2022,
	},
    'brand': 'Toyota',
    'color': 'red',
};

console.log(car.date.month);

Output: 

'car.date' is possibly 'null' or 'undefined'.

The problem with both examples is that the object we are trying to access could be ‘null’ or ‘undefined’. In example 1, we intentionally defined ‘myNum’ with ‘number’, ‘null’, or ‘undefined’. In example 2, our car.date.month object could also get the type of ‘null’ or ‘undefined’. Therefore, when we try to access ‘car.date.month’, the same error occurs. 

This feature is called “strictNullChecks” in TypeScript. Basically, TypeScript will mark a TypeError if we try to use ‘null’ or ‘undefined’ where a specific value is expected. 

How to fix this issue?

Solution 1: Disable “strictNullChecks”

One of the ways to fix this problem is to disable “strictNullChecks”. To do this, open the tsconfig.json file and set “strictNullChecks” to false:

{
	"angularCompilerOptions": {
    	"strictNullChecks": false,
    }
}

When “strictNullChecks” is set to false, TypeScript will ignore the ‘undefined’ and ‘null’ values.

However, this solution is not highly recommended since it can lead to other runtime errors after. Therefore, “strictNullChecks” should always be turned on (set to true). 

Solution 2: Use an ‘if’ expression to check

With this method, we will check the type of our object and only access it if it does not have the type of ‘null’ or ‘undefined’. 

Fixed code for example 1:

var myNum: number | null | undefined;

if (myNum) {
    console.log(myNum.toString());
} else {
    // Code to be executed  
}

Solution 3: Use Optional Chaining Operator

With the Optional Chaining Operator, it will mark our variable as optional. This means that everytime our object is ‘undefined’ or ‘null’, it will return ‘undefined’ instead of error. To use the Optional Chaining Operator, add a question mark (?) to our object. 

Let’s apply that to fix example 2: 

type Car = {
    date?: {
        month: string;
        year: number;
    } | null;
    brand: string;
    color: string;
};

const car: Car = {
    'date' : {
        'month': 'September',
        'year': 2022,
    },
    'brand': 'Toyota',
    'color': 'red',
};

console.log(car?.date?.month);

Output: 

September

Summary

The “Object is possibly ‘null’ or ‘undefined'” error in TypeScript is often encountered when we try to access a variable or property that could possibly have the value of ‘null’ or ‘undefined’. There are various ways to solve it, but the two recommended ones are using Optional Chaining Operator or an if conditional expression to check.

Maybe you are interested:

• Property ‘flatMap’, ‘flat’ does not exist on type in TS
• Object is of type ‘unknown’ Error in TypeScript

Khanh Ngo

Hello. My name is Khanh Hai Ngo. I graduated in Information Technology at VinUni. My advanced programming languages include C, C++, Python, Java, JavaScript, TypeScript, and R, which I would like to share with you. You will benefit from my content.

---

Name of the university: VinUni
Major: EE
Programming Languages: C, C++, Python, Java, JavaScript, TypeScript, R