Optional properties in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an optional property age in the interface.

Typescript

interface Person {
  name: string;
  age[1]: number;
}

Drag options to blanks, or click blank then click option'

A!

B?

C:

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : instead of question mark ? after the property name.

Forgetting to add any symbol after the property name.

In TypeScript, adding a ? after the property name makes it optional.

2fill in blank

medium

Complete the code to create an object that may or may not have the optional property age.

Typescript

const user: Person = {
  name: "Alice",
  [1]
};

Drag options to blanks, or click blank then click option'

Aage: 30

Bage?

Cage;

Dage = 30

Attempts:

3 left

💡 Hint

Common Mistakes

Using age? in object literal, which is invalid syntax.

Using assignment = inside object literal.

When creating an object, optional properties can be included like normal properties with a value.

3fill in blank

hard

Fix the error in the interface by correctly marking email as optional.

Typescript

interface Contact {
  phone: string;
  email[1]: string;
}

Drag options to blanks, or click blank then click option'

A!

B:

C?

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : instead of question mark ? for optional properties.

Using exclamation mark ! which is for definite assignment assertion, not optional.

The question mark ? after email marks it as optional.

4fill in blank

hard

Complete the code to create a function parameter with an optional property middleName.

Typescript

function greet(person: { firstName: string; middleName[1]: string; }) {
  console.log(`Hello, ${person.firstName}`);
}

Drag options to blanks, or click blank then click option'

A?

B;

C,

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : instead of semicolon to separate properties.

Forgetting the question mark for optional property.

The question mark ? marks middleName as optional, and the semicolon ; separates properties.

5fill in blank

hard

Fill both blanks to define an interface with optional properties and use it in an object.

Typescript

interface Book {
  title: string;
  author[1]: string;
  year[2]: number;
}

const myBook: Book = {
  title: "1984",
  author: "George Orwell"
};

Drag options to blanks, or click blank then click option'

A?

B;

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : instead of question mark ? for optional properties.

Missing semicolons after properties.

The author property is optional with ? and ends with a semicolon ;. The year property is optional and ends with a semicolon.

Practice

1. What does the ? symbol mean when used in a TypeScript interface property like age?: number?

easy

A. The property is required and must always be present.

B. The property is private and cannot be accessed outside the interface.

C. The property is optional and may or may not be present in objects.

D. The property is readonly and cannot be changed after initialization.

Solution

1. Step 1: Understand the meaning of ? in interfaces

   The ? after a property name marks it as optional, meaning it can be missing in objects that implement the interface.

2. Step 2: Compare with other property types

   Required properties must always be present, private and readonly are unrelated concepts.

3. Final Answer:

   The property is optional and may or may not be present in objects. -> Option C

4. Quick Check:

   Optional property = property with ? [OK]

Hint: Look for ? to spot optional properties quickly [OK]

Common Mistakes:

• Thinking ? means property is required
• Confusing optional with readonly or private
• Assuming optional properties must have a default value

2. Which of the following is the correct syntax to declare an optional property email of type string in a TypeScript interface?

easy

A. email?: string

B. optional email: string

C. email: string?

D. email: optional string

Solution

1. Step 1: Recall TypeScript optional property syntax

   Optional properties use a ? immediately after the property name, before the colon and type.

2. Step 2: Check each option

   email?: string matches the correct syntax: email?: string. Others are invalid syntax.

3. Final Answer:

   email?: string -> Option A

4. Quick Check:

   Optional property syntax = name + ? + : + type [OK]

Hint: Remember: ? goes right after property name [OK]

Common Mistakes:

• Placing ? after the type instead of property name
• Using keywords like 'optional' which are invalid
• Missing colon between property name and type

3. Given this interface and object:

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

const user: User = { id: 1 };
console.log(user.name);

What will be the output when running this code?

medium

A. undefined

B. null

C. An error because name is missing

D. Empty string

Solution

1. Step 1: Understand optional property behavior

   The property name is optional and not provided in the object, so it is undefined.

2. Step 2: Check console.log output

   Logging user.name prints undefined because the property is missing, not null or empty string.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Missing optional property = undefined [OK]

Hint: Missing optional properties are undefined, not errors [OK]

Common Mistakes:

• Expecting runtime error for missing optional property
• Confusing undefined with null or empty string
• Assuming default values are assigned automatically

4. Identify the error in this TypeScript interface declaration:

interface Product {
  id: number;
  description?: string = "No description";
}

medium

A. The interface keyword is misspelled.

B. The property id must be optional too.

C. The equals sign = should be a colon :.

D. Optional properties cannot have default values in interfaces.

Solution

1. Step 1: Check interface property syntax

   Interfaces only declare types; they cannot assign default values to properties.

2. Step 2: Analyze the error

   The syntax description?: string = "No description" is invalid because default values are not allowed in interfaces.

3. Final Answer:

   Optional properties cannot have default values in interfaces. -> Option D

4. Quick Check:

   Interfaces declare types, no default values allowed [OK]

Hint: Interfaces declare types only, no default values [OK]

Common Mistakes:

• Trying to assign default values inside interfaces
• Confusing interfaces with classes or object literals
• Ignoring TypeScript syntax rules for interfaces

5. You want to create a function that accepts an object with optional middleName property and returns the full name. Which of these implementations correctly handles the optional property without errors?

interface Person {
  firstName: string;
  middleName?: string;
  lastName: string;
}

function getFullName(person: Person): string {
  // Which code below is correct?
}

hard

A. return `${person.firstName} ${person.middleName} ${person.lastName}`;

B. return `${person.firstName} ${person.middleName ?? ''} ${person.lastName}`.trim();

C. return `${person.firstName} ${person.middleName!} ${person.lastName}`;

D. return person.firstName + person.middleName + person.lastName;

Solution

1. Step 1: Understand optional property usage

   The middleName may be undefined, so accessing it directly can cause unwanted 'undefined' in output.

2. Step 2: Evaluate each option

   return `${person.firstName} ${person.middleName} ${person.lastName}`; inserts undefined if missing. return `${person.firstName} ${person.middleName ?? ''} ${person.lastName}`.trim(); uses nullish coalescing ?? to replace undefined with empty string and trims extra spaces. return `${person.firstName} ${person.middleName!} ${person.lastName}`; uses non-null assertion which can cause runtime errors if missing. return person.firstName + person.middleName + person.lastName; concatenates without spaces and can produce 'undefined' string.

3. Final Answer:

   return `${person.firstName} ${person.middleName ?? ''} ${person.lastName}`.trim(); -> Option B

4. Quick Check:

   Use ?? '' to safely handle optional strings [OK]

Hint: Use nullish coalescing (?? '') to handle optional strings safely [OK]

Common Mistakes:

• Directly using optional property without checks
• Using non-null assertion (!) unsafely
• Concatenating without spaces or trimming