Generic class syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic class named Box.

Typescript

class Box[1] {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
}

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

A(T)

B<T>

C[T]

D{T}

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or braces instead of angle brackets for generics.

Forgetting to add the generic parameter after the class name.

In TypeScript, generic classes use angle brackets after the class name to declare a type parameter.

2fill in blank

medium

Complete the code to create an instance of the generic class Box with type number.

Typescript

const numberBox = new Box[1](123);

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

A<string>

B<any>

C<boolean>

D<number>

Attempts:

3 left

💡 Hint

Common Mistakes

Using a type that does not match the value passed to the constructor.

Omitting the generic type parameter.

To create a generic class instance with a specific type, use angle brackets with the type after the class name.

3fill in blank

hard

Fix the error in the generic class declaration by completing the blank.

Typescript

class Pair[1] {
  first: T;
  second: U;
  constructor(first: T, second: U) {
    this.first = first;
    this.second = second;
  }
}

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

A<T, U>

B<T>

C<U>

D<T U>

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one generic parameter when two are needed.

Missing the comma between generic parameters.

When declaring multiple generic types, separate them with commas inside angle brackets like .

4fill in blank

hard

Fill both blanks to declare a generic class with two type parameters and a method returning the first value.

Typescript

class Container[1] {
  value1: T;
  value2: U;
  constructor(v1: T, v2: U) {
    this.value1 = v1;
    this.value2 = v2;
  }
  getFirst(): [2] {
    return this.value1;
  }
}

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

A<T, U>

BT

CU

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one generic parameter in the class declaration.

Returning the wrong generic type in the method.

The class declares two generic types . The method getFirst returns the first value of type T.

5fill in blank

hard

Fill all three blanks to create a generic class with a method that swaps two values and returns a tuple.

Typescript

class Swapper[1] {
  a: T;
  b: U;
  constructor(a: T, b: U) {
    this.a = a;
    this.b = b;
  }
  swap(): [[2], [3]] {
    return [this.b, this.a];
  }
}

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

A<T, U>

BT

CU

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the tuple with the same order of types instead of swapped.

Using incorrect generic type syntax.

The class uses two generic types . The swap method returns a tuple with types [U, T], swapping the order.

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