How to check for Null in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 25, 2022

banner

Check out my new book

Check for Null in TypeScript #

To check for null in TypeScript, use a comparison to check if the value is equal or is not equal to null, e.g. if (myValue === null) {} or if (myValue !== null) {}. If the condition is met, the if block will run.

index.ts
type Color = string | null; const color: Color = null; // ✅ Check if null if (color === null) { console.log('value is equal to null'); } else { console.log('value is NOT equal to null'); } // ✅ Check if NOT equal to null if (color !== null) { console.log('value is NOT equal to null'); } // ✅ Check if value is equal to null or undefined if (color == null) { console.log('value is equal to null or undefined'); } // ✅ Check if value is NOT equal to null or undefined if (color != null) { console.log('value is NOT equal to null or undefined'); }

In our first if statement, we check if the color variable stores a null value.

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

The third example uses loose equals ==, instead of strict equals ===, to check if the variable is equal to null or undefined.

This checks for both null and undefined because when using loose equals (==), null is equal to undefined.

index.ts
console.log(null == undefined); // 👉️ true

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

index.ts
type Person = { name: string | null; }; const person: Person = { name: null, }; if (person.name !== null) { // ✅ TypeScript knows person.name is string // 👇️ (property) name: string console.log(person.name); console.log(person.name.toLowerCase()); }

The name property on the Person type can either be a string or null.

In the if statement, we check if the property is not null.

If the condition is met, TypeScript knows that the only other possible type 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 property is not null, we'd get an error.

index.ts
type Person = { name: string | null; }; const person: Person = { name: null, }; // ⛔️ Error: Object is possibly 'null'.ts(2531) console.log(person.name.toLowerCase())

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

index.ts
type Person = { name: string | null; }; const person: Person = { name: null, }; if (typeof person.name === 'string') { // ✅ TypeScript knows person.name is string // 👇️ (property) name: string console.log(person.name); console.log(person.name.toLowerCase()); }

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

index.ts
type Person = { name: string | null; }; const person: Person = { name: null, }; console.log(person.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 person.name property, even though it could be null.

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

index.ts
type Person = { name?: { first?: string | null; }; }; const person: Person = {}; console.log(person?.name?.first?.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.