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.

Practice

1. What does the <T> mean in a TypeScript generic class declaration like class Box<T> {}?

easy

A. It declares a placeholder type that can be replaced with any type when creating an instance.

B. It defines a fixed type named T that cannot be changed.

C. It is a syntax error and should be removed.

D. It specifies that the class only works with numbers.

Solution

1. Step 1: Understand generic type parameter

   The <T> after the class name declares a generic type parameter named T, which acts as a placeholder for any type.

2. Step 2: Purpose of generic classes

   This allows the class to work flexibly with any type specified when creating an instance, making the code reusable and type-safe.

3. Final Answer:

   It declares a placeholder type that can be replaced with any type when creating an instance. -> Option A

4. Quick Check:

   Generic <T> = placeholder type [OK]

Hint: Generic <T> means flexible type placeholder [OK]

Common Mistakes:

• Thinking <T> fixes the type permanently
• Confusing generic syntax with inheritance
• Assuming <T> is a variable or value

2. Which of the following is the correct syntax to declare a generic class named Container with a type parameter T?

easy

A. class Container[T] {}

B. class Container(T) {}

C. class Container {T} {}

D. class Container<T> {}

Solution

1. Step 1: Recall generic class syntax

   In TypeScript, generic classes use angle brackets <> to declare type parameters after the class name.

2. Step 2: Match correct syntax

   The correct syntax is class Container<T> {}. Other options use parentheses, curly braces, or square brackets incorrectly.

3. Final Answer:

   class Container<T> {} -> Option D

4. Quick Check:

   Generic class uses <T> syntax [OK]

Hint: Generic classes use angle brackets <T> after name [OK]

Common Mistakes:

• Using parentheses instead of angle brackets
• Placing type parameter inside class body
• Using square brackets which are for arrays

3. What is the output of this TypeScript code?

class Box<T> {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
  getContent(): T {
    return this.content;
  }
}

const box = new Box<string>('hello');
console.log(box.getContent());

medium

A. Box { content: 'hello' }

B. undefined

C. hello

D. TypeError at runtime

Solution

1. Step 1: Understand class instantiation

   The class Box<T> is instantiated with T = string, so content is a string holding 'hello'.

2. Step 2: Trace method call

   The method getContent() returns the stored content, which is 'hello'. The console.log prints this string.

3. Final Answer:

   hello -> Option C

4. Quick Check:

   Generic class returns stored value 'hello' [OK]

Hint: Generic class returns stored value of specified type [OK]

Common Mistakes:

• Expecting object print instead of string
• Confusing property with method output
• Thinking generic causes runtime error

4. Identify the error in this generic class code:

class Pair<T, U> {
  first: T;
  second: U;
  constructor(first: T, second: T) {
    this.first = first;
    this.second = second;
  }
}

medium

A. Constructor parameters should be (first: T, second: U) to match property types.

B. Generic parameters should be declared as <T> only, not .

C. Properties first and second must have the same type T.

D. Constructor cannot have parameters in a generic class.

Solution

1. Step 1: Compare constructor parameters with property types

   The class declares two generic types T and U, with properties first: T and second: U.

2. Step 2: Identify mismatch in constructor

   The constructor incorrectly uses second: T instead of second: U, causing a type mismatch.

3. Final Answer:

   Constructor parameters should be (first: T, second: U) to match property types. -> Option A

4. Quick Check:

   Constructor params must match generic property types [OK]

Hint: Match constructor param types to generic properties [OK]

Common Mistakes:

• Using same type for both parameters ignoring generics
• Removing one generic parameter incorrectly
• Thinking constructor can't have parameters in generics

5. You want to create a generic class Dictionary<K, V> that stores key-value pairs. Which implementation correctly uses generics to store and retrieve values by key?

class Dictionary<K, V> {
  private items: Map<K, V> = new Map();

  add(key: K, value: V): void {
    this.items.set(key, value);
  }

  get(key: K): V | undefined {
    return this.items.get(key);
  }
}

hard

A. Generic types cannot be used with Map in TypeScript.

B. This implementation correctly uses generics to store and retrieve values by key.

C. The add method should return the value added, not void.

D. The Map should be declared as Map<V, K> to match key-value order.

Solution

1. Step 1: Analyze Map usage with generics

   The class uses Map<K, V> to store keys of type K and values of type V, which is correct.

2. Step 2: Check methods for correct generic usage

   The add method sets a key-value pair, and get retrieves the value by key, both using the generic types properly.

3. Final Answer:

   This implementation correctly uses generics to store and retrieve values by key. -> Option B

4. Quick Check:

   Generic Map<K, V> with add/get methods = correct [OK]

Hint: Use Map with add/get methods for generic dictionary [OK]

Common Mistakes:

• Swapping key and value types in Map declaration
• Expecting add to return a value unnecessarily
• Believing generics can't be used with built-in types