TypeScript Error TS2533: Object is Possibly ‘null’ or ‘undefined’

The Problem

TypeScript is a strongly typed superset of JavaScript, adding static types to the language. As such, TypeScript provides compile-time checks and error messages to enhance the development experience. One common error message is TS2533, which alerts developers that an object might be null or undefined. In this tutorial, we’ll navigate through the reasons behind this error and propose effective solutions to handle it.

Solution 1: Explicit Type Assertion

Adjusting your types using type assertion is a direct way of telling the TypeScript compiler that you know better about the presence of a value.

1. Identify the variable that is potentially null or undefined.
2. Add a type assertion using the as keyword, followed by the type you are asserting.

Example:

const element = document.getElementById('myElement') as HTMLElement; // Assert that getElementById will not return null

Type assertions are purely compile-time constructs which tells the TypeScript compiler to treat a value as a specific type.

Solution 2: Non-null Assertion Operator

The non-null assertion operator (!) postfix on a variable tells TypeScript that it will not be null or undefined.

Put an exclamation mark ! right after the variable that might be null or undefined:

const element = document.getElementById('myElement')!; // Assert non-null

Solution 3: Optional Chaining

Introduced in TypeScript 3.7, optional chaining allows you to read the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.

Use the ?. operator after a property name or index to perform a nullish check:

const value = someObject?.property; // Access property without causing an error if someObject is nullish

Solution 4: Default Values with Nullish Coalescing Operator

With TypeScript version 3.7 or later, developers can utilize the nullish coalescing operator to provide a default value if the left-hand expression is null or undefined.

Use the ?? operator to provide a default value:

const value = someVariable ?? 'default'; // Use 'default' if someVariable is null or undefined

Notes

Remember that the solutions provided might have consequences. Indiscriminate use of the non-null assertion, for example, can lead to runtime errors if overused. Therefore, while addressing the TypeScript error TS2533 issue, properly understand the implications of the solution you choose for your particular scenario.