Optional properties in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of accessing optional property

What is the output of this TypeScript code?

Typescript

interface User {
  name: string;
  age?: number;
}

const user: User = { name: "Alice" };
console.log(user.age);

A null

B 0

C undefined

D TypeError

💡 Hint

Optional properties may not exist on the object.

The property 'age' is optional and not set, so accessing it returns undefined.

❓ Predict Output

intermediate

Output when optional property is checked

What will this code output?

Typescript

interface Product {
  id: number;
  description?: string;
}

const product: Product = { id: 101 };
if (product.description) {
  console.log(product.description.length);
} else {
  console.log("No description");
}

A 0

B No description

C undefined

D TypeError

💡 Hint

Check if optional property exists before accessing.

Since 'description' is undefined, the else branch runs printing 'No description'.

🔧 Debug

advanced

Why does this code cause an error?

This TypeScript code causes a compilation error. What is the reason?

Typescript

interface Config {
  timeout?: number;
}

function setTimeoutValue(config: Config) {
  const time = config.timeout + 1000;
  console.log(time);
}

setTimeoutValue({});

A Syntax error in interface declaration

B 'timeout' is missing and cannot be accessed

C Function setTimeoutValue requires timeout property to be present

D Property 'timeout' might be undefined, so adding number causes error

💡 Hint

Optional properties can be undefined and need checks before use.

Since 'timeout' can be undefined, adding 1000 to it without checking causes a type error.

📝 Syntax

advanced

Which option correctly defines an optional property?

Which of these interface property declarations correctly defines an optional property named 'email' of type string?

A email?: string;

B email: string?;

C email: string | undefined;

D optional email: string;

💡 Hint

Optional properties use a special syntax with a question mark after the name.

The correct syntax for optional properties is placing '?' after the property name before the colon.

🚀 Application

expert

How many keys are in the resulting object?

Given this code, how many keys does the object 'settings' have after execution?

Typescript

interface Settings {
  theme?: string;
  fontSize?: number;
  language?: string;
}

const settings: Settings = { theme: "dark" };

if (settings.fontSize === undefined) {
  settings.fontSize = 14;
}

if (!settings.language) {
  settings.language = "en";
}

console.log(Object.keys(settings).length);

A 3

B 1

C 0

D 2

💡 Hint

Optional properties can be added later by assignment.

Initially only 'theme' is set. Then 'fontSize' and 'language' are assigned, so total keys are 3.