Generics in Angular services - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic Angular service class.

Angular

export class DataService<[1]> {
  constructor() {}
}

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

Aany

Bdata

CService

DT

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lowercase or descriptive word instead of a single uppercase letter.

Using a reserved keyword as the generic parameter.

The generic type parameter is usually a single uppercase letter like T to represent a type.

2fill in blank

medium

Complete the method signature to return an Observable of the generic type.

Angular

getData(): Observable<[1]> {
  // implementation
}

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

Aany

Bstring

CT

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Returning Observable which loses type safety.

Returning a concrete type like Observable instead of the generic.

The method should return an Observable of the generic type T to keep it flexible.

3fill in blank

hard

Fix the error in the generic method to accept a parameter of generic type and return it.

Angular

processData(data: [1]): [1] {
  return data;
}

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

AT

Bstring

Cany

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for parameter and return type.

Using concrete types instead of the generic type.

The parameter and return type should both use the generic type T to maintain consistency.

4fill in blank

hard

Fill both blanks to declare a generic method that returns an Observable of the generic type.

Angular

fetchItem<[1]>(id: number): Observable<[2]> {
  // implementation
}

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

AU

BT

DV

Attempts:

3 left

💡 Hint

Common Mistakes

Using different letters for the generic parameter and return type.

Using the class generic type instead of method generic type.

The method declares its own generic type U and returns an Observable of U.

5fill in blank

hard

Fill all three blanks to create a generic Angular service method that filters an array of generic items by a property value.

Angular

filterItems(items: [1][], key: keyof [2], value: any): [3][] {
  return items.filter(item => item[key] === value);
}

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

AT

DU

Attempts:

3 left

💡 Hint

Common Mistakes

Using different types for items and keys.

Using a non-generic type like any.

All blanks use the generic type T to keep the method flexible and type-safe.