Optional properties in interfaces in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

interface User {
  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 '?' for optional properties.

Forgetting to add any symbol, which makes the property required.

In TypeScript, optional properties in interfaces are marked with a question mark ? after the property name.

2fill in blank

medium

Complete the code to define an interface with an optional property.

Typescript

interface Product {
  id: number;
  description[1]: string;
}

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

A:

B;

C?

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon ':' which is for type annotation, not optional marking.

Using exclamation mark '!' which is for definite assignment assertions.

The question mark ? after description marks it as optional in the interface.

3fill in blank

hard

Fix the error in the interface by correctly marking the optional property.

Typescript

interface Settings {
  theme: string;
  fontSize[1]: number;
}

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

A?

B:

C;

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon ':' which is for type annotation, not optional marking.

Using exclamation mark '!' which is for definite assignment assertions.

The property fontSize should be marked optional with a question mark ? to indicate it may be missing.

4fill in blank

hard

Complete the code to create an interface with one required and one optional property.

Typescript

interface Car {
  model:: string;
  year[1]: number;
}

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

A:

B?

C;

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Marking both properties as optional or both as required.

Using semicolon or exclamation mark instead of colon or question mark.

The required property model uses a colon : for type annotation. The optional property year uses a question mark ? to mark it optional.

5fill in blank

hard

Complete the code to define an interface with one optional and two required properties.

Typescript

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

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

A?

B:

C;

D!

Attempts:

3 left

💡 Hint

Common Mistakes

Marking required properties as optional or vice versa.

Using semicolon or exclamation mark instead of colon or question mark.

The properties title and author are required, so they use colon :. The property pages is optional, so it uses a question mark ?.