Generic class syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic class instance method

What is the output of this TypeScript code when run with console.log(box.getValue());?

Typescript

class Box<T> {
  private value: T;
  constructor(value: T) {
    this.value = value;
  }
  getValue(): T {
    return this.value;
  }
}
const box = new Box<number>(123);
console.log(box.getValue());

A undefined

B "123"

C TypeError at runtime

D 123

💡 Hint

Remember that the generic type is replaced by the actual type when creating an instance.

The class Box stores a value of type T. Here, T is number, so getValue() returns 123 as a number.

❓ Predict Output

intermediate

Generic class with multiple type parameters

What will be the output of this code snippet?

Typescript

class Pair<T, U> {
  first: T;
  second: U;
  constructor(first: T, second: U) {
    this.first = first;
    this.second = second;
  }
  toString(): string {
    return `${this.first} and ${this.second}`;
  }
}
const pair = new Pair<string, number>("age", 30);
console.log(pair.toString());

A "age and 30"

B "30 and age"

C "[object Object] and 30"

D TypeError at runtime

💡 Hint

Check the order of parameters and how template strings work.

The toString method returns the first and second values joined by ' and '. The first is a string 'age', second is number 30.

🔧 Debug

advanced

Identify the error in generic class usage

What error will this TypeScript code produce?

Typescript

class Container<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
  getContent(): T {
    return this.content;
  }
}
const c = new Container();
console.log(c.getContent());

A No error, outputs the content

B Output: undefined

C Error: Generic type 'Container' requires 1 type argument(s).

D Output: null

💡 Hint

Check if the generic type parameter is provided when creating an instance.

The class Container requires a type argument when instantiated. Omitting it causes a compile-time error.

📝 Syntax

advanced

Correct syntax for generic class declaration

Which option shows the correct syntax to declare a generic class in TypeScript?

A class Data {<T> constructor(value: T) { this.value = value; } }

B class Data<T> { constructor(value: T) { this.value = value; } }

C class Data<T> { constructor<T>(value: T) { this.value = value; } }

D class Data<T> { constructor(value) { this.value = value; } }

💡 Hint

Generic type parameters go after the class name, not the constructor.

Option B correctly declares a generic class with type parameter T and uses it in the constructor parameter.

🚀 Application

expert

Determine the number of items in a generic class instance

Given this generic class and instance, how many items are in the items array after execution?

Typescript

class Collection<T> {
  items: T[] = [];
  add(item: T) {
    this.items.push(item);
  }
}
const numbers = new Collection<number>();
numbers.add(1);
numbers.add(2);
numbers.add(3);

A 3

B 1

C 0

D TypeError at runtime

💡 Hint

Count how many times add() is called with a number.

The add method pushes each number into the items array. It is called three times, so items has length 3.