Optional properties in interfaces in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when a property in a TypeScript interface is marked with a question mark (e.g., age?: number)?

It means the property is optional. Objects implementing the interface may or may not include that property.

beginner

How do you declare an optional property named email of type string in a TypeScript interface?

You write email?: string; inside the interface definition.

beginner

Can an object that implements an interface with optional properties omit those properties?

Yes, optional properties can be left out when creating an object that implements the interface.

intermediate

What happens if you try to access an optional property that is not provided in an object?

The property will be undefined. You should check if it exists before using it.

intermediate

Why are optional properties useful in TypeScript interfaces?

They allow flexibility by letting objects have some properties but not requiring all, making interfaces adaptable to different situations.

How do you mark a property as optional in a TypeScript interface?

A Add an exclamation mark (!) after the property name

B Use the keyword 'optional' before the property name

C Add a question mark (?) after the property name

D Use the keyword 'nullable' before the property name

In TypeScript, a question mark (?) after the property name marks it as optional.

If an interface has an optional property, can an object omit that property when implementing the interface?

A Yes, it can omit the optional property

B No, all properties must be present

C Only if the property is a string

D Only if the property is a number

Optional properties can be left out when creating objects that implement the interface.

What is the type of an optional property if it is not provided in an object?

A null

B undefined

C empty string

D zero

If an optional property is missing, its value is undefined.

Which of the following is a correct optional property declaration in an interface?

A phone?: string;

B phone!: string;

C optional phone: string;

D phone: string?;

The correct syntax uses a question mark after the property name.

Why might you use optional properties in an interface?

A To make properties private

B To force all objects to have the same properties

C To make properties readonly

D To allow objects to have flexible sets of properties

Optional properties let objects include some properties but not require all, adding flexibility.

Explain what optional properties in TypeScript interfaces are and how they affect object creation.

Think about how you can leave some details out when describing something.

Describe a real-life example where optional properties in an interface would be useful.

Consider a form where some fields are not required.

Practice

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

easy

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

B. The property is required and must always be provided.

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

D. The property is optional and may be omitted when creating an object.

Solution

1. Step 1: Understand the ? in interface properties

   The ? after a property name in an interface means that property is optional.

2. Step 2: Effect on object creation

   This means when creating an object of that interface type, you can omit that property without error.

3. Final Answer:

   The property is optional and may be omitted when creating an object. -> Option D

4. Quick Check:

   Optional property = may be omitted [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 default values

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. email: string?;

C. email?: string;

D. optional email: string;

Solution

1. Step 1: Recall optional property syntax

   In TypeScript, optional properties use a ? immediately after the property name.

2. Step 2: Match syntax to options

   Only email?: string; uses email?: string; which is correct syntax for optional property.

3. Final Answer:

   email?: string; -> Option C

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
• Omitting the semicolon but that is less critical

3. Given the interface and object below, what will be the output of console.log(user.age)?

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

medium

A. Error: Property 'age' is missing

B. undefined

C. null

D. 0

Solution

1. Step 1: Understand optional property behavior

   The property age is optional and not provided in the object.

2. Step 2: Check value of missing optional property

   Accessing a missing optional property returns undefined in JavaScript/TypeScript.

3. Final Answer:

   undefined -> Option B

4. Quick Check:

   Missing optional property = undefined [OK]

Hint: Missing optional property returns undefined, not error [OK]

Common Mistakes:

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

4. Identify the error in the following code snippet:

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

const item: Product = {
  id: 101,
  description: undefined
};

medium

A. Assigning undefined to an optional property is allowed.

B. Optional properties cannot be assigned undefined explicitly.

C. Missing semicolon after interface declaration.

D. Property 'id' should be optional too.

Solution

1. Step 1: Check assignment to optional property

   Optional properties can be omitted or explicitly assigned undefined.

2. Step 2: Validate code correctness

   Assigning undefined to description is valid and causes no error.

3. Final Answer:

   Assigning undefined to an optional property is allowed. -> Option A

4. Quick Check:

   Optional property can be undefined explicitly [OK]

Hint: Optional properties accept undefined explicitly without error [OK]

Common Mistakes:

• Thinking undefined assignment causes error
• Confusing optional with required properties
• Ignoring that missing semicolon is not an error here

5. You have this interface:

interface Config {
  url: string;
  timeout?: number;
  retries?: number;
}

Which of the following objects correctly implements Config with only url provided and no errors?

hard

A. { url: "http://example.com", timeout: undefined, retries: undefined }

B. { url: "http://example.com", timeout: null }

C. { url: "http://example.com", timeout: 0, retries: 3 }

D. { timeout: 1000, retries: 3 }

Solution

1. Step 1: Check required properties

   The url property is required and must be present.

2. Step 2: Validate optional properties usage

   Optional properties can be omitted or set to undefined without error.

3. Step 3: Analyze each option

   { url: "http://example.com", timeout: undefined, retries: undefined } has url and optional properties set to undefined, which is valid.
   { url: "http://example.com", timeout: null } uses null which is not assignable to number.
   { url: "http://example.com", timeout: 0, retries: 3 } includes optional properties but that is allowed, but question asks for only url provided.
   { timeout: 1000, retries: 3 } misses required url property.

4. Final Answer:

   { url: "http://example.com", timeout: undefined, retries: undefined } -> Option A

5. Quick Check:

   Required present, optional can be undefined or omitted [OK]

Hint: Required must exist; optional can be undefined or omitted [OK]

Common Mistakes:

• Using null for number type optional properties
• Omitting required properties
• Assuming optional must be omitted, not undefined