Interfaces for data models in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an interface for a user with a name and age.

Angular

export interface User {
  name: string;
  age: [1];
}

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

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number for age.

Using boolean for age.

The age property should be a number to represent the user's age.

2fill in blank

medium

Complete the code to add an optional email property to the interface.

Angular

export interface User {
  name: string;
  age: number;
  email[1] string;
}

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

A?:?

B:

C? :

D?:

Attempts:

3 left

💡 Hint

Common Mistakes

Using '? :' with a space, which is invalid syntax.

Omitting the question mark, making the property required.

The ?: syntax marks the email property as optional in the interface.

3fill in blank

hard

Fix the error in the interface by completing the property type correctly.

Angular

export interface Product {
  id: number;
  name: string;
  tags: [1];
}

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

Astring[]

Bstring

CArray

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of string[] for an array.

Using Array without a type parameter.

The tags property should be an array of strings, so string[] is the correct type.

4fill in blank

hard

Fill both blanks to define an interface with a readonly id and a method that returns a string.

Angular

export interface Item {
  [1] id: number;
  getName(): [2];
}

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

Areadonly

Bvoid

Cstring

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Using void as the return type when a string is expected.

Using public keyword which is not valid in interfaces.

The id is marked readonly to prevent changes. The getName method returns a string.

5fill in blank

hard

Fill all three blanks to create an interface with an index signature, a method, and an optional property.

Angular

export interface Dictionary {
  [key: [1]]: [2];
  getKeys(): [3][];
  description?: string;
}

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

Astring

Bnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using number as the index key type when keys are strings.

Using boolean as the value type incorrectly.

The index signature uses string keys and string values. The getKeys method returns an array of strings.