The “Object is possibly undefined'” error happens when we try to access a property on an object which may be undefined. To solve this error, we can use optional chaining to short-circuit if the position is equal to null.
How to Solve if the Object is Possibly Undefined or a Null error in TypeScript
Many times, we will come across the error message error typescript: object is possibly ‘undefined’ in TypeScript. The reason for this error message is due to the Strict Null Check feature in TypeScript. Here TypeScript is fundamentally telling the developer that a variable can possibly be undefined or marked as null, so we have to write some code to handle if the value is either undefined or marked as null.
Example:
Assume we have a simple function declaration like
function myFunction(b: number, c?: number): number {
return (b * c);
}
When we run the code comprising the above function declaration, then we will get the runtime error message ‘undefined’. Here since we made the second parameter ‘c’ as an optional one, we will or will not pass a value to it in the function call. So, if the function like myFunction(10) is called, then the value of c will be undefined. To solve this problem, fundamentally we need to write the code if the value of c is undefined, which can be done in numerous ways.
Key 1:
We can allocate a default value to c
For example:
function myFunction(b: number, c: number = 20): number {
return (b * c);
}
If you are getting this error in a changed scenario such as while generating a component inside an application, then you can give a default value or you can assign a value in the constructor.
Key 2:
You can use the bang(!) operator
When we are using the bang(!) operator, we are telling that the variable to which we added the operator will never be null or it is undefined.
For example:
function myFunction(b: number, c?: number): number {
return (b * c!);
}
Key 3:
We can use an if statement to hold the situation where c is undefined.
For example:
function myFunction(b: number, c?: number): number {
if (c == undefined) {
return 200;
} else {
return (b * c);
}
}
We can also use the additional variants of if statements such as the ternary operator (??). If you are certain that the property could not have any value of null, you can always use the non-null assertion operator. The use of exclamation marks is the non-null assertion operator used in TypeScript. It will remove null and undefined from any type without doing explicit type checking. When you use this type of approach, you can tell TypeScript that this value can never be null or undefined. If you are making an evaluation in an if statement, also uses the logical AND (&&) operator to make sure that the property is of the correct type. The logical AND operator often makes sure the property is not undefined. This is needed because if the reference is null or undefined, the chaining operator (?.) will return as undefined and TypeScript does not allow comparing undefined to a number. The result might have a value of undefined because that is the value of the optional chaining operator. The logical AND operator will not evaluate any value to the right if the value to the left is false or undefined. All of the values in the if the condition has to be true for the if block to run. The truthy values are those values that are not false. This is why TypeScript is able to conclude the type of the result variable to be a string in the if block.
A better way to get around the error typescript: object is possibly ‘undefined’ situation is to use the type of operator.
For example
type b = {
c?: {
d?: string;
e?: string;
};
};
const p1: b = {};
if (p1.c && typeof p1.c.d === ‘string’) {
// 👇️ const result: string
const result = p1.c.d;
}
We check if the type is a string. This is better than checking if the value is truthy as empty strings are falsy values TypeScript.
This error can occur in different scenarios. The reason for the error message will be the same everywhere, but it can vary depending on the place.
GOOD POST