How to check for Null or Undefined in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 25, 2022

banner

Photo from Unsplash

Check for Null or Undefined in TypeScript #

To check for null or undefined, compare the value to both null and undefined, e.g. if (name === undefined || name === null) {}. If either of the two conditions is met, the variable stores a null or undefined value and the if block will run.

index.ts
type Name = null | undefined | string; let name: Name; // ✅ check if undefined or null if (name === undefined || name === null) { console.log('✅ variable is undefined or null'); } else { console.log('✅ variable is NOT undefined or null'); } // ✅ check if NOT undefined or null if (name !== undefined && name !== null) { console.log('✅ variable is not undefined or null'); }

In our first if statement, we check if the name variable stores an undefined or null value.

The second example shows how to check if the variable is NOT undefined or null.

You might also see a shorter version of the comparisons above:

index.ts
type Name = null | undefined | string; let name: Name; // ✅ check if undefined or null if (name == null) { console.log('✅ variable is undefined or null'); } else { console.log('✅ variable is NOT undefined or null'); } // ✅ check if NOT undefined or null if (name != null) { console.log('✅ variable is not undefined or null'); }

Note that we used loose equals == instead of strict equals ===.

When using loose equals to compare to null, you compare to both null and undefined.

index.ts
// 👇️ true (loose equals) console.log(null == undefined);
It's generally better to be explicit and direct, than to be implicit and write less intuitive code.

The if statements above serve as a type guard in TypeScript.

index.ts
type Name = null | undefined | string; let name: Name; if (name !== null && name !== undefined) { // 👇️ let name: string console.log(name); console.log(name.toLowerCase()); }

The Name type can be null, undefined or a string.

In the if statement, we check if the variable is not null and is not undefined.

If both conditions are met, TypeScript knows that the variable is a string and allows us to use string-specific methods like toLowerCase().

If we try to call the toLowerCase() method directly, without checking if the variable is not null and undefined, we'd get an error.

index.ts
type Name = null | undefined | string; let name: Name; // ⛔️ Object is possibly 'null' or 'undefined'. console.log(name.toLowerCase());

You could also use a type guard to check if the variable is a string, which would be the more direct approach in this scenario.

index.ts
type Name = null | undefined | string; let name: Name; if (typeof name === 'string') { // ✅ TypeScript knows `name` is string console.log(name.toLowerCase()); }

A newer way to check if a variable is null or undefined is to use the optional chaining (?.) operator.

index.ts
type Name = null | undefined | string; let name: Name; console.log(name?.toLowerCase());

The optional chaining (?.) operator short-circuits instead of throwing an error if the reference is equal to null or undefined.

This is why TypeScript allows us to check if the toLowerCase() method exists on the name variable, even though it could be null or undefined.

You could also use this approach to check if a deeply nested property exists on an object.

index.ts
type Person = { address?: { country?: string; }; }; const obj: Person = {}; console.log(obj?.address?.country?.toLowerCase());

If the reference is equal to null or undefined, the optional chaining operator will short-circuit and return undefined and no error is thrown.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.