Generic class syntax in Typescript - Mini Project: Build & Apply

Generic class syntax

📖 Scenario: Imagine you want to create a box that can hold any type of item. This box should be able to store numbers, strings, or even objects. Using a generic class helps you build such a flexible box.

🎯 Goal: You will build a generic class called Box that can store one item of any type. Then, you will create a box for numbers and a box for strings, and finally print their contents.

📋 What You'll Learn

Create a generic class called Box with a type parameter T.

Add a property content of type T to the class.

Add a constructor that takes a parameter content of type T and assigns it to the property.

Create a variable numberBox of type Box<number> with content 123.

Create a variable stringBox of type Box<string> with content 'hello'.

Print the contents of numberBox and stringBox.

💡 Why This Matters

🌍 Real World

Generic classes let you write flexible and reusable code that works with many data types without repeating yourself.

💼 Career

Understanding generics is important for writing clean, type-safe code in TypeScript, which is widely used in web development jobs.

1

Create the generic class Box

Create a generic class called Box with a type parameter T. Inside the class, add a property called content of type T. Add a constructor that takes a parameter content of type T and assigns it to the property content.

Typescript

# Your code here

Hint

Use class Box<T> to create a generic class. The constructor should assign the parameter to the property.

2

Create a numberBox with number content

Create a variable called numberBox of type Box<number> and set it to a new Box with the number 123 as content.

Typescript

class Box {
    content: T;
    constructor(content: T) {
        this.content = content;
    }
}

// Your code here

Hint

Use const numberBox: Box<number> = new Box(123); to create the box.

3

Create a stringBox with string content

Create a variable called stringBox of type Box<string> and set it to a new Box with the string 'hello' as content.

Typescript

class Box {
    content: T;
    constructor(content: T) {
        this.content = content;
    }
}

const numberBox: Box = new Box(123);

// Your code here

Hint

Use const stringBox: Box<string> = new Box('hello'); to create the box.

4

Print the contents of both boxes

Write two console.log statements to print the content of numberBox and stringBox.

Typescript

class Box {
    content: T;
    constructor(content: T) {
        this.content = content;
    }
}

const numberBox: Box = new Box(123);
const stringBox: Box = new Box('hello');

// Your code here

Hint

Use console.log(numberBox.content); and console.log(stringBox.content); to print the values.

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