Error ts2531 object is possibly null

TypeScript adds optional type checking capabilities to JavaScript. Indeed, code written in TypeScript is checked for error before it is executed, saving development and debugging time. One of the potential errors that a developer might encounter is the TypeScript «object is possibly null» error.

One of the methods to fix the «object is possibly null» error in TypeScript is to use the optional chaining operator, like so:

typescriptinterface IBook {
    author?: {
        name?: string;
    } | null;
}

const book: IBook = {};

// Notice the question mark operator
console.log(book.author?.name);
// Outputs: 'undefined'

By the end of this article, you will know why the «object is possibly ‘null’ or ‘undefined'» error happens and different ways to fix it.

Let’s get to it 😎.

Why does this error happen?

This error, also called TS2533, happens if an object or a property might be null or undefined.

It happens at compile time due to the TypeScript strictNullChecks flag set to true.

Here is an example of this error:

typescriptinterface IBook {
    author?: {
        name?: string;
    } | null;
}

const book: IBook = {};

// TS2533: Object is possibly 'null' or 'undefined'
console.log(book.author.name);

Luckily, there are multiple ways of fixing this error.

Read more: How do interfaces work in TypeScript?

How to fix this error with the optional chaining operator?

The optional chaining operator (?.), introduced in TypeScript 3.7, lets the developers safely access deeply nested properties by checking for null and undefined values.

Here is an example of the optional chaining operator in action:

typescriptlet arr: number[] | undefined | null;

// Outputs: undefined
console.log(arr?.length); 

If a property that we want to access does not exist, the result of the expression will be undefined.

How to fix this error with the non-null assertion operator?

The non-null assertion operator (!.), also called the exclamation mark operator, indicates to the compiler that we are sure that the value we want to access is not null or undefined.

Here is an example of the non-null assertion operator in action:

typescriptconst myName = 'Tim' as string | undefined;

// Outputs: 3
console.log(myName!.length); 

How to fix this error with the nullish coalescing operator?

If the left operand is null or undefined, the nullish coalescing operator (??) returns the right one.

Here is the nullish coalescing operator in action:

typescriptlet myName: string | undefined | null

console.log(myName ?? 'Tim');

In this example, we provide a default value for the myName variable.

How to fix this error with an if statement?

For old-school folks, you can use a simple if statement.

typescriptconst myName = 'Tim' as string | undefined;

if (typeof myName === 'string') {
    // Outputs: 3
    console.log(myName.length); 
}

Read more: The typeof operator in TypeScript

Final thoughts

As you can see, you have multiple ways of fixing the «object is possibly null» error.

For my part, to fix this error, I usually use the optional chaining operator.

You can also disable TypeScript «strict null checks» in the tsconfig.json file. By doing so, the compiler will not output this error anymore. However, I don’t recommend doing so because that may introduce new bugs into your code.

Finally, here are some other TypeScript tutorials that I’ve written:

• Interface default value in TypeScript
• Set data structure in TypeScript
• Switch statement in TypeScript

This post explains below things

• 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.

There is a very simple approach and a very complex one.

The simple approach is to use raw HTML with anchor element outside of angular without RouterLink. Register to clicks on that anchor element and use the Router service to navigate.

The task was to fire links but the actual problem is far deeper, now it links next time its showing an angular component…

So, for the complex solution:

This is an highly advanced topic… Not only it involves using advanced angular techniques it’s also advanced in the leaflet implementation.

I’ll do my best to convey the message but due to the complexity the examples will be very simple and will require work.

First — Angular realm.

An HTML string that contains directives, components or pipes will never work, the only way is to initialize a View

Let’s define A View as a reference to view instance of a component or a template.

These are called ComponentRef and TemplateRef

So, we have 2 ways to solve this problem. Since I can’t do both i’ll go with ComponentRef but note that you can also use TemplateRef.
With templates you’ll first need to obtain a template defined in the component as well as a ViewContainerRef to attach that template to.

We will build a service that accepts a leaflet Marker and binds to the click event of the marker, on click it will open a popup which is an angular Component.

The component is simple, it renders a link.

@Component({
  selector: 'facility-link',
  template: `Facility <br/> <a routerLink="{{link}}"> View Two</a>`
})
export class FacilityLinkComponent {
  public link: string;
  constructor() { }
}

Now, for the service:

@Injectable()
export class LinkPopupService {

  constructor(private cfr: ComponentFactoryResolver,
              private injector: Injector,
              private appRef: ApplicationRef) { }


  register(marker: leaflet.Marker, link: string): void  {
    marker.on('click', ($event: leaflet.MouseEvent)  => this.popup($event.target, link) );
  }

  popup(marker: leaflet.Marker, link: string) {
    const cmpFactory = this.cfr.resolveComponentFactory(FacilityLinkComponent);
    const componentRef = cmpFactory.create(this.injector);
    componentRef.instance.link = link;
    this.appRef.attachView(componentRef.hostView);
    const markerElement = marker.getElement();
    markerElement.parentElement.appendChild(componentRef.location.nativeElement);

    const markerPos = leaflet.DomUtil.getPosition(markerElement);
    const markerClass = leaflet.DomUtil.getClass(markerElement);


    leaflet.DomUtil.setTransform(componentRef.location.nativeElement, markerPos);
    leaflet.DomUtil.setClass(componentRef.location.nativeElement, markerClass);
  }
}

The register method accepts a marker and the link and registers to the click event.

When the popup method fires it uses angular tools to create a view instance of FacilityLinkComponent, set the link for future binding, attach a view to it and attach it to the DOM.

This all happens in the first 5 lines of code.

Some notes:

• We must attach a view so change detection works
• A Proper implementation will allow to set ViewContainerRef and / or an Injector — this is a must when using lazy loading.
• It is preferred sending data to the component via Injector and not by assignment (ReflectiveInjector)
• Proper clean up is required (destroy the component and detach the view)
• Need to add toggle logic, also clean on navigation.

Leaflet

The code from the 6th line performs positioning of the popup.

This is a very simple logic, it just copies everything from the marker.

This is why I used a marker, so I’ll have a reference to take the positioning from.

In a realworld example you’ll need to get a panel and push the components into their own layer, computing the position. This is not that difficult since leaflet has all the helper, but it was too much for this.

Hope it helps.