TypeScript Check If Undefined [With Examples]

As a TypeScript developer, you should know how to handle undefined scenarios. In this tutorial, I’ll walk you through the most reliable ways to check if a value is undefined in TypeScript. You will learn how to handle undefined in your TypeScript projects.

What Does undefined Mean in TypeScript?

Let us first understand what undefined actually means in TypeScript. Simply put, undefined is a special value that indicates a variable has been declared but hasn’t been assigned a value yet.

For example:

let city: string;
console.log(city); // Output: undefined

In this case, city exists, but since we haven’t assigned a value, it’s undefined. TypeScript also allows you to explicitly set a variable to undefined:

let temperature: number | undefined = undefined;

Check out How to Check the Type of an Object in TypeScript

Why Should You Check for undefined in TypeScript?

Ignoring undefined values can lead to unexpected bugs and runtime errors. For instance, if you try to access a property or call a method on an undefined value, your application can crash.

Imagine you’re working with user data from an API:

interface User {
  name: string;
  state?: string; // State is optional
}

const user: User = { name: "Jessica" };
// What if you want to display the user's state?
console.log(user.state.toUpperCase()); // Error! Cannot read property 'toUpperCase' of undefined

To avoid these issues, always check if a value is undefined before using it.

Read How to Iterate Over an Object in TypeScript

Now, let us see how to check for undefined in TypeScript.

Method 1: Using the Strict Equality Operator (===)

This is the most straightforward way to check if a variable is undefined in TypeScript. I use this approach all the time, especially when working with API responses or optional properties.

let zipCode: string | undefined;

if (zipCode === undefined) {
  console.log("Zip code is missing.");
} else {
  console.log(`Zip code: ${zipCode}`);
}

You can see the exact output in the screenshot below:

Why I Like This Method:

• It’s clear and explicit.
• It doesn’t confuse undefined with other falsy values like null, 0, or "" (empty string).

When to Use:

• When you specifically want to check for undefined (not null or other falsy values).

Read TypeScript Key Value Pair

Method 2: Using the typeof Operator

Another safe way to check for undefined is using the typeof operator. This is especially handy if you’re dealing with global variables or properties that might not exist at all.

if (typeof zipCode === "undefined") {
  console.log("Zip code is missing.");
}

Tip:

• The typeof check works even if the variable hasn’t been declared yet in some JavaScript scenarios, but in TypeScript, you’ll usually get a compile-time error if you reference undeclared variables.

Method 3: Optional Chaining (?.)

Since TypeScript 3.7, optional chaining has made it much easier to work with nested objects that may be undefined. I use this all the time when dealing with deeply nested API responses.

const user = {
  address: {
    state: "California"
  }
};

console.log(user.address?.state); // Output: California

const user2 = {};
console.log(user2.address?.state); // Output: undefined (no error!)

Why I Recommend This:

• Prevents runtime errors when accessing properties of undefined or null.
• Makes your code cleaner and easier to read.

Method 4: Nullish Coalescing (??)

The nullish coalescing operator (??) allows you to provide a default value if the variable is undefined or null. This is a lifesaver when you want to ensure your app displays something meaningful.

const state = user.state ?? "Unknown";
console.log(state); // Output: "Unknown" if user.state is undefined or null

Real-World Example:
Let’s say you have a USA-based weather app, and the API might not always return the temperature field:

const weather = {
  temperature: undefined
};

const temp = weather.temperature ?? 72; // Default to 72°F
console.log(`Current temperature: ${temp}°F`);

Check out TypeScript Return Type of Function

Method 5: Type Guards and Custom Functions

For more complex scenarios, especially when working with arrays or external data, I like to use custom type guard functions. This makes your code reusable and more readable.

function isDefined<T>(value: T | undefined): value is T {
  return value !== undefined;
}

const states = ["California", undefined, "Texas", undefined, "Florida"];
const validStates = states.filter(isDefined);

console.log(validStates); // Output: ["California", "Texas", "Florida"]

Why Use Type Guards?

• TypeScript understands that after this check, the value is not undefined.
• Helps with strict type safety.

Common Problems and Best Practices

From my experience, I am sharing with you some common problems and best practices.

1. Don’t Confuse undefined with null

TypeScript treats undefined and null as separate types. If you want to check for both, use:

if (value == null) { // true for null or undefined
  // handle missing value
}

But be careful—this will also catch null.

2. Avoid Loose Equality

Don’t use == undefined unless you want to check for both null and undefined. Prefer === undefined for clarity.

3. Enable strictNullChecks

Always enable strictNullChecks in your tsconfig.json. This forces you to handle undefined and null explicitly, making your code more robust.

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

4. Use Default Values in Function Parameters

You can provide default values for function parameters to avoid undefined:

function greet(name: string = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Guest!

I hope this tutorial has helped you understand the different ways to check for undefined values in TypeScript. If you have any questions or want to share your own tips, feel free to leave a comment below.

You may also like the following tutorials:

• Add to an Array in TypeScript Only If the Value Exists
• How to Convert TypeScript Objects to JSON