TypeScript Generic Class

Introduction

In this chapter, we will explore generic classes in TypeScript. Generics allow you to create flexible and reusable classes that can work with different types while maintaining type safety. This is particularly useful for creating data structures and utility classes that need to operate on various types of data.

Table of Contents

• Definition
• Generic Class Syntax
• Using Generic Classes
• Type Constraints in Generic Classes
• Multiple Type Variables
• Conclusion

Definition

A generic class is a class that can operate on different types of data while maintaining type safety. By using generics, you can create classes that are flexible and reusable across different types.

Generic Class Syntax

Syntax

class ClassName<T> {
  // class implementation
}

Using Generic Classes

Example

Here, we create a generic class Box that stores a value of type T. The class provides methods to get and set the value. This class works with any type, providing flexibility while ensuring type safety.

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  setValue(value: T): void {
    this.value = value;
  }
}

// Using the generic class with a number
let numberBox = new Box<number>(123);
console.log(numberBox.getValue()); // Output: 123

// Using the generic class with a string
let stringBox = new Box<string>("Hello, TypeScript!");
console.log(stringBox.getValue()); // Output: Hello, TypeScript!

In this example, the Box class is used with both a number and a string. The type parameter T allows the class to store and operate on any type, and the type is inferred based on the arguments provided.

Type Constraints in Generic Classes

You can add constraints to a generic class to limit the types that can be used. This is done using the extends keyword.

Example

Here, we create a generic class Container that can store a value of type T, where T must have a length property. This ensures that only types with a length property can be used with the class.

interface Lengthwise {
  length: number;
}

class Container<T extends Lengthwise> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }

  logLength(): void {
    console.log(this.value.length);
  }
}

// Using the generic class with a string
let stringContainer = new Container<string>("Hello, TypeScript!");
stringContainer.logLength(); // Output: 16

// Using the generic class with an array
let arrayContainer = new Container<number[]>([1, 2, 3, 4, 5]);
arrayContainer.logLength(); // Output: 5

In this example, the Container class ensures that the value parameter has a length property. This allows the class to operate safely on any type that meets this constraint.

Multiple Type Variables

You can use multiple type variables in a generic class to work with multiple types simultaneously.

Example

Here, we create a generic class Pair that stores two values of different types.

class Pair<T, U> {
  private first: T;
  private second: U;

  constructor(first: T, second: U) {
    this.first = first;
    this.second = second;
  }

  getFirst(): T {
    return this.first;
  }

  getSecond(): U {
    return this.second;
  }
}

// Using the generic class with a number and a string
let numberAndStringPair = new Pair<number, string>(42, "TypeScript");
console.log(numberAndStringPair.getFirst()); // Output: 42
console.log(numberAndStringPair.getSecond()); // Output: TypeScript

// Using the generic class with two strings
let stringPair = new Pair<string, string>("Hello", "World");
console.log(stringPair.getFirst()); // Output: Hello
console.log(stringPair.getSecond()); // Output: World

In this example, the Pair class uses two type variables T and U to accept and store two values of different types.

Conclusion

In this chapter, we covered generic classes in TypeScript, including their definition, syntax, and how to use them with various types. We also explored adding type constraints and using multiple type variables in generic classes. Understanding generic classes is essential for creating flexible, reusable, and type-safe TypeScript code.