Optional chaining with types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of optional chaining with nested objects?

Consider the following TypeScript code using optional chaining. What will be logged to the console?

Typescript

type User = {
  name: string;
  address?: {
    city?: string;
  };
};

const user: User = { name: "Alice" };

console.log(user.address?.city ?? "Unknown city");

A "Unknown city"

B "undefined"

C "Alice"

D Throws a runtime error

💡 Hint

Optional chaining returns undefined if the property before it is undefined or null.

Since user.address is undefined, user.address?.city returns undefined, so the nullish coalescing operator (??) returns "Unknown city".

❓ Predict Output

intermediate

What is the value of variable 'result' after optional chaining?

Given this TypeScript code, what is the value of 'result'?

Typescript

interface Config {
  settings?: {
    theme?: string;
  };
}

const config: Config = { settings: { theme: "dark" } };

const result = config.settings?.theme ?? "light";

A undefined

B "light"

C "dark"

D null

💡 Hint

Check if the optional chaining accesses a defined property.

config.settings is defined and has theme "dark", so optional chaining returns "dark" and nullish coalescing does not apply.

❓ Predict Output

advanced

What error does this code raise when accessing a possibly undefined method?

Examine this TypeScript code snippet. What error will occur at runtime?

Typescript

type ApiResponse = {
  data?: {
    getValue?: () => number;
  };
};

const response: ApiResponse = {};

const value = response.data?.getValue?.();
console.log(value.toFixed(2));

A SyntaxError: Unexpected token '.'

B ReferenceError: value is not defined

C No error, logs 'undefined'

D TypeError: Cannot read properties of undefined (reading 'toFixed')

💡 Hint

Optional chaining returns undefined if the method does not exist, then calling a method on undefined causes an error.

response.data is undefined, so response.data?.getValue?.() returns undefined. Calling toFixed on undefined causes a TypeError.

🧠 Conceptual

advanced

How does optional chaining affect type narrowing in TypeScript?

Which statement best describes how optional chaining influences type narrowing in TypeScript?

A Optional chaining does not narrow the type; the result type always includes undefined.

B Optional chaining narrows the type to exclude undefined or null for the accessed property.

C Optional chaining converts all types to 'any' to avoid errors.

D Optional chaining forces the property to be non-nullable at compile time.

💡 Hint

Think about what happens to the type when you use ?. operator.

Optional chaining returns the property value or undefined if the property is missing, so the type always includes undefined.

❓ Predict Output

expert

What is the output of this complex optional chaining with arrays and functions?

Analyze the following TypeScript code and determine what is printed to the console.

Typescript

type User = {
  getFriends?: () => Array<{ name: string; age?: number }>;
};

const user: User = {
  getFriends: () => [
    { name: "Bob", age: 25 },
    { name: "Carol" },
  ],
};

const friendAge = user.getFriends?.()[1]?.age ?? "Age unknown";
console.log(friendAge);

A undefined

B "Age unknown"

C Throws a runtime error

D 25

💡 Hint

Check if the second friend has an age property defined.

The second friend object does not have an age property, so optional chaining returns undefined, triggering the fallback string.

Practice

1. What does the optional chaining operator ?. do in TypeScript?

easy

A. It forces a property to be non-nullable.

B. It throws an error if the property does not exist.

C. It converts a value to a boolean.

D. It safely accesses a property or method, returning undefined if the value is null or undefined.

Solution

1. Step 1: Understand optional chaining purpose

   Optional chaining ?. allows safe access to nested properties or methods without causing runtime errors if the object is null or undefined.

2. Step 2: Identify behavior on null or undefined

   If the value before ?. is null or undefined, it returns undefined instead of throwing an error.

3. Final Answer:

   It safely accesses a property or method, returning undefined if the value is null or undefined. -> Option D

4. Quick Check:

   Optional chaining = safe access without error [OK]

Hint: Optional chaining returns undefined if value is null or undefined [OK]

Common Mistakes:

• Thinking it throws an error on missing property
• Confusing it with non-null assertion operator
• Assuming it converts values to boolean

2. Which of the following is the correct syntax to safely access the property name of an object user using optional chaining?

easy

A. user?.name()

B. user?.name

C. user?.[name]

D. user?.name?

Solution

1. Step 1: Review optional chaining syntax for properties

   The correct syntax to access a property safely is object?.property.

2. Step 2: Check each option

   user?.name uses user?.name which is correct. user?.[name] uses brackets incorrectly. user?.name() treats name as a method call. user?.name? has invalid syntax.

3. Final Answer:

   user?.name -> Option B

4. Quick Check:

   Property access with ?. = user?.name [OK]

Hint: Use ?. before property name without parentheses for safe access [OK]

Common Mistakes:

• Adding parentheses when accessing properties
• Using brackets incorrectly with optional chaining
• Placing ? after property name

3. Consider the following TypeScript code:

type User = { profile?: { age?: number } };
const user: User = {};
const age = user.profile?.age ?? 30;
console.log(age);

What will be the output?

medium

A. 30

B. null

C. Error at runtime

D. undefined

Solution

1. Step 1: Analyze optional chaining and nullish coalescing

   The expression user.profile?.age safely tries to access age. Since profile is undefined, this returns undefined.

2. Step 2: Apply nullish coalescing operator

   The ?? operator returns the right side value 30 because the left side is undefined.

3. Final Answer:

   30 -> Option A

4. Quick Check:

   undefined ?? 30 = 30 [OK]

Hint: ?. returns undefined if missing; ?? provides default value [OK]

Common Mistakes:

• Expecting undefined instead of default value
• Confusing ?? with || operator
• Assuming runtime error on missing property

4. Identify the error in this TypeScript code snippet:

interface Data {
  info?: {
    value: number;
  };
}

const data: Data = {};
const val = data?.info.value;

medium

A. No error, code works fine

B. Runtime error: accessing property of undefined

C. Type error: missing optional chaining before 'value'

D. Syntax error: optional chaining used incorrectly on data

Solution

1. Step 1: Check optional chaining usage

   The code uses data?.info.value. Optional chaining is applied only on data, but info can be undefined.

2. Step 2: Identify missing optional chaining

   Accessing info.value without optional chaining can cause a runtime error if info is undefined. It should be data.info?.value or data?.info?.value.

3. Final Answer:

   Type error: missing optional chaining before 'value' -> Option C

4. Quick Check:

   Optional chaining needed before 'value' to avoid error [OK]

Hint: Chain ?. for each possibly undefined property [OK]

Common Mistakes:

• Applying ?. only once for nested properties
• Assuming optional chaining on parent covers all children
• Ignoring possible undefined intermediate objects

5. Given this nested object type and variable:

type Config = {
  settings?: {
    theme?: {
      color?: string;
    };
  };
};

const config: Config = {};

Which expression safely accesses the color property and provides a default of 'blue' if missing?

hard

A. config?.settings?.theme?.color ?? 'blue'

B. config.settings.theme.color || 'blue'

C. config.settings?.theme.color ?? 'blue'

D. config?.settings.theme?.color || 'blue'

Solution

1. Step 1: Use optional chaining for all nested optional properties

   Since settings, theme, and color are optional, use ?. at each level: config?.settings?.theme?.color.

2. Step 2: Use nullish coalescing for default value

   Use ?? 'blue' to provide default only if the value is null or undefined, avoiding falsey value issues.

3. Final Answer:

   config?.settings?.theme?.color ?? 'blue' -> Option A

4. Quick Check:

   Chain ?. and use ?? for default [OK]

Hint: Chain ?. for each optional and use ?? for default [OK]

Common Mistakes:

• Using || which treats empty string as false
• Missing optional chaining on some nested properties
• Mixing ?. and non-optional access incorrectly