Object is possibly ‘undefined’ error in typescript

by

Basically this error occurs in typescript.

error in typescript

Why this error occurs ?

The error “Object is possibly ‘undefined'” occurs in TypeScript when the compiler detects that a variable or property may be undefined or null, and you are trying to access that property. This error occurs because TypeScript is designed to help catch errors at compile time that could cause runtime errors.

Example :

type student= {
  Ramesh?: { // 👈️ could be undefined
    class?: string;
    RollNumber?: string;
  };
};

const s1: student = {};

// ⛔️ Error: Object is possibly 'undefined'.ts(180448)
console.log(s1.Ramesh.class);

In the above example `student` is a TypeScript type alias that defines the shape of an object that has a property named `Ramesh`. The Ramesh property is optional (? indicates optional property) which means it can be either undefined or an object that has a `class` and `RollNumber` property.

then, We created an empty object called s1 and assign it a data type `student`. When we tried to show the class `s1.Ramesh.class` using console.log(), an error message appeared that the object might not actually exist.

How to fix this error ?

To fix this error, you can add a check to see if the property is defined before accessing it, using the optional chaining operator (?.)

For example :

type student= {
  Ramesh?: { // 👈️ could be undefined
    class?: string;
    RollNumber?: string;
  };
};

const s1: student = {};
const STD = s1?.Ramesh?.class;
console.log(STD); // 👉️ undefined

The question mark dot (?.) syntax is called optional chaining in TypeScript.
It is like giving two condition that if the value exist then show it or if it doesn’t then return undefined.

NOTE: This approach is commonly used in fetching data from a remote.

Leave a Comment