How to check for Undefined in TypeScript

avatar

Borislav Hadzhiev

Fri Feb 25 20222 min read

banner

Photo by Brooke Cagle

Check for Undefined in TypeScript #

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

index.ts
type Country = string | undefined; let country: Country; // ✅ Check if equal to undefined if (country === undefined) { console.log('value is undefined'); } else { console.log('value is NOT undefined'); } // ✅ Check if NOT equal to undefined if (country !== undefined) { console.log('value is NOT undefined'); }

In our first if statement, we check if the country variable stores an undefined value.

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

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

index.ts
type Country = string | undefined; let country: Country; if (country !== undefined) { // ✅ TypeScript knows that country is string // 👇️ let country: string console.log(country); console.log(country.toLowerCase()); }

The Country type can be string or undefined.

In the if statement, we check if the value is not undefined.

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 value is not undefined, we'd get an error.

index.ts
type Country = string | undefined; let country: Country; // ⛔️ Error: Object is possibly 'undefined'.ts(2532) console.log(country.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 Country = string | undefined; let country: Country; if (typeof country === 'string') { // ✅ TypeScript knows that country is string // 👇️ let country: string console.log(country); console.log(country.toLowerCase()); }

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

index.ts
type Country = string | undefined; let country: Country; console.log(country?.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 country variable, even though it could be 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.