{

Fix for Object is possibly null or undefined in typescript?


Fix for Object is possibly 'null' or 'undefined in typescript?

This post explains below things

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

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 possible is null after setting –strictNullChecks=true compiler configuration flag.

For example, In the below code 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 on a string object causes this error Object is possibly ‘null’ or ‘undefined’ at compile time as well as linting if configured.

There are multiple solutions to avoid this.

disable strictNullChecks

This is not fixed but avoiding an error at compile by setting the compiler flag.

In typescript applications, open tsconfig.jsonand 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": true

  }
}

The same code above works in Vue Typescript react application.

Manually Checking null or undefined

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

We have to handle null or undefined checks using a variable 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 and used for variables that tell the compiler that variables are optional. Optional Chaining operator is ? and appended to a variable(variable !) as below

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

Using non-null assertion operator

non-null assertion operator symbol Exclaimatory symbol(!) and appended to 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

nullish coalescing operator symbol is ?? introduced in ES21.

It is released in Typescript, 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.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.