Why Optional chaining with types in Typescript? - Purpose & Use Cases

The Big Idea

What if you could avoid endless checks and still safely get the data you want?

The Scenario

Imagine you have a big family tree written on paper. You want to find your cousin's phone number, but sometimes the cousin or their phone number might not be written down. You have to check each step carefully to avoid mistakes.

The Problem

Manually checking if each family member exists before asking for their phone number is slow and tiring. You might forget a check and get an error, or spend too much time writing many if-statements.

The Solution

Optional chaining lets you ask for the phone number in one simple step. If any part is missing, it safely returns undefined instead of causing an error. This makes your code cleaner and easier to read.

Before vs After

✗ Before

if (person && person.cousin && person.cousin.phone) {
  console.log(person.cousin.phone);
}

✓ After

console.log(person?.cousin?.phone);

What It Enables

It allows you to safely access deeply nested information without writing many checks, making your code simpler and less error-prone.

Real Life Example

When working with data from a website API, some user details might be missing. Optional chaining helps you get the data you want without crashing your app if some parts are missing.

Key Takeaways

Manual checks for nested data are slow and error-prone.

Optional chaining simplifies safe access to nested properties.

It helps write cleaner, safer, and easier-to-read code.