Generic class syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a generic class in TypeScript?

A generic class is a class that can work with any data type, specified when creating an instance. It uses a placeholder type (like <T>) to allow flexibility.

beginner

How do you declare a generic class in TypeScript?

You add a type parameter in angle brackets after the class name, for example: <code>class Box&lt;T&gt; { ... }</code> where <code>T</code> is the placeholder type.

beginner

What does T represent in a generic class?

T is a type parameter that acts like a variable for a type. It gets replaced by a real type when you create an instance of the class.

beginner

How do you create an instance of a generic class with a specific type?

You specify the type inside angle brackets when creating the object, like <code>let box = new Box&lt;string&gt;();</code> to make <code>T</code> equal to <code>string</code>.

beginner

Why use generic classes instead of regular classes?

Generic classes let you write flexible and reusable code that works with many types without repeating the same class for each type.

How do you declare a generic class named Container with a type parameter?

A class Container {}

B class Container<T> {}

C class Container<T>[] {}

D class Container[] {}

The correct syntax for a generic class uses angle brackets with a type parameter, like class Container<T> {}.

What does the T in class Box<T> represent?

A A function

B A specific type like string

C A variable name

D A placeholder for any type

T is a placeholder type that will be replaced by a real type when the class is used.

How do you create an instance of Box for numbers?

A let box = new Box<number>();

B let box = new Box();

C let box = new Box<string>();

D let box = Box<number>;

You specify the type inside angle brackets when creating the instance: new Box<number>().

Why are generic classes useful?

A They allow code reuse with different types

B They only work with strings

C They make code slower

D They replace functions

Generic classes let you reuse the same code for many types, making your code flexible and easier to maintain.

Which of these is NOT a correct way to declare a generic class?

A class Data<T, U> {}

B class Data<U> {}

C class Data[] {}

D class Data<T> {}

Generic classes require type parameters in angle brackets, not square brackets.

Explain how to declare and use a generic class in TypeScript.

Think about how you tell the class what type it should work with.

Why would you choose a generic class over a normal class?

Consider how you can write one class that fits many needs.

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