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.