Fix for Object is possibly null or undefined in typescript?

• What causes error TS2533: Object is possibly ’null’ or ‘undefined’?
• Multiple ways to Object is possibly null or Object is possibly undefined.

Typescript converted to Javascript, Before compiling, It found that the object or property value is null or undefined

How do you fix the possibly null error object?

Typescript compiler throws an error when an object or its property is possibly null. To avoid this, Use one of the approaches before accessing the variable

• disabling Compiler Options strictNullChecks i.e false to avoid this error
• Manually check for undefined using the if condition type guard
• use Optional Chaining Operator(Question Mark(?)
• non-null assertion operator, the symbol is Exclamatory Mark(!)
• nullish coalescing operators in the latest javascript

How do you fix the error object that is possibly undefined?

Typescript compiler throws an error when accessing an object or its property values and possibly these values are undefined.

To fix this, Use one of the approaches before accessing the variable

• skip this error by disabling strictNullChecks i.e false
• Manually check for null using the if condition typeguard
• use Optional Chaining Operator, Symbol is Question Mark(?)
• use a non-null assertion operator, the symbol is Exclamatory Mark(!)
• use nullish coalescing operators in the latest javascript

What causes error TS2533: Object is possibly ’null’ or ‘undefined’"?

This error caused due to an object property might result in null or undefined. It is a compile-time error for an object possibly is null after setting the –strictNullChecks=true compiler configuration flag.

For example, In the below code, object str is defined with string array or undefined or null. str property possibility of null or undefined values.

let str: string[] | undefined|null
let len: number = str.length; // Object is possibly 'null' or 'undefined'.

In the above code line (str.length), accessing the length of a string object causes this error. Object is possibly ’null’ or ‘undefined’ at compile time as well as linting if configured.

Fix for Object is possibly ’null’ or ‘undefined’

There are multiple solutions to avoid this.

• disable strictNullChecks in ts configu.json

This solution is not fixing an error, but skipping an error at compile time by setting the compiler flag.

In typescript applications, open tsconfig.json and set strictNullChecks to false.

For example, in Angular applications, add this to angularCompilerOptions in tsconfig.json

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

In react typescript applications, open tsconfig.jsonand change strictNullChecks to false in compilerOptions

{
  "compilerOptions": {
          "strictNullChecks": false

  }
}

The same code above works in Vue Typescript, and node typescript applications.

• Manually check null or undefined using the if condition

In this case, You can use and if conditional expression to avoid a null or undefined check

We have to handle null or undefined checks using a variable in if the expression

This checks for string objects that exist or null and undefined values. It only calls the length method if a string object exists.

let str: string[] | undefined|null

if (str) {
  let len number = str.length; // Object is possibly 'null' or 'undefined'.
}

• Fix with Optional Chaining operator

Optional Chaining is introduced in the typescript 3.7 version. used for variables that tell the compiler that variables are optional. The optional Chaining operator is ? and appended to a variable(variable?) as below

let str: string[] | undefined|null
let lenb: number = str?.length; 

• Using a non-null assertion operator

The non-null assertion operator symbol is an Exclamatory symbol(!) and appended to a variable to avoid null or undefined.

This tells the typescript compiler that the variable should never be null or undefined

let str: string[] | undefined|null
let len: number =  str!.length  ;

• Fix with nullish coalescing operators

The nullish coalescing operator symbol is ?? introduced in the latest Javascript ES2021.

It is released in Typescript and used to return the right-hand operand when the left-hand operand is null or undefined.

let str: string[] | undefined | null;
function getLength(str: string[] | "") {
  return str.length;
}
let len: number = getLength(str ?? "");

Conclusion

The learned object is possibly null or undefined in typescript with solutions.