How optional chaining works in TypeScript.

In TypeScript, Optional Chaining is a feature that enables developers to safely access deeply nested properties of an object while handling scenarios where intermediate properties might be missing. This means that if any part of the chain is null or undefined, the expression short-circuits and returns undefined, avoiding an error.

Optional Chaining is denoted by the question mark and dot ?.. This operator can be applied in three contexts:

1. Object property access: For example, obj?.prop.
2. Array index access: For example, arr?.[index].
3. Function or method invocation: For example, func?.().

Example Illustration:

Suppose we have a Student object containing personal information and a nested School object, which includes name and address. We want to safely access the student's school address, but we are not certain that every Student object contains a School object.

typescript
type Student = {
    name: string;
    age: number;
    school?: {
        name: string;
        address?: string;
    };
};

const student: Student = {
    name: "Alice",
    age: 20,
    school: {
        name: "Sunshine High"
    }
};

// Using Optional Chaining to safely access school address
console.log(student.school?.address);

Without Optional Chaining, we would need to verify the existence of school before accessing the address property:

typescript
if (student.school) {
    console.log(student.school.address);
} else {
    console.log(undefined);
}

However, with Optional Chaining, this sequence of checks can be condensed into a single line of code:

typescript
console.log(student.school?.address);

In this case, if the school object is missing or lacks the address property, the expression evaluates to undefined without throwing an error.

Optional Chaining enhances code readability and robustness, allowing developers to confidently handle nested object structures.