DEV Community

Cover image for TypeScript Generics Demystified: Unlocking the Power of Parametric Polymorphism
Baransel
Baransel

Posted on • Originally published at baransel.dev

TypeScript Generics Demystified: Unlocking the Power of Parametric Polymorphism

TypeScript Generics Demystified: Unlocking the Power of Parametric Polymorphism

When it comes to writing versatile and reusable code, TypeScript generics are your secret weapon. Generics allow you to create flexible and type-safe functions, classes, and data structures. In this article, we'll demystify TypeScript generics with real-world examples, helping you unlock the full potential of parametric polymorphism in your projects.

Understanding Generics

What Are Generics?

Generics are a way to create components that work with a variety of data types, rather than a single specific type. They introduce the concept of parametric polymorphism, enabling you to write functions, classes, and interfaces that can operate on different data types while maintaining type safety.

Example 1: A Simple Generic Function

Let's start with a straightforward example of a generic function. Here's a function that echoes the input value:

function echo<T>(value: T): T {
  return value;
}
Enter fullscreen mode Exit fullscreen mode

In this example, T is a type parameter. It represents an arbitrary data type that will be determined when the function is called. This function can echo any data type it receives.

Example 2: Generic Classes

Generics can also be applied to classes. Consider a generic Stack class that can store elements of any type:

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}
Enter fullscreen mode Exit fullscreen mode

With this generic class, you can create stacks of various data types, ensuring type safety for each stack's contents.

Practical Use Cases

Example 3: A Generic Utility Function

Generics are particularly useful for utility functions. Here's an example of a generic utility function that swaps the values of two variables:

function swap<T>(a: T, b: T): [T, T] {
  return [b, a];
}
Enter fullscreen mode Exit fullscreen mode

The swap function works for any data type, making it highly versatile.

Example 4: Creating Type-Safe Containers

Generics enable you to create type-safe data structures. For instance, you can create a generic Dictionary that maps keys to values:

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

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

  get(key: K): V | undefined {
    return this.data.get(key);
  }
}
Enter fullscreen mode Exit fullscreen mode

With this generic dictionary, you can ensure that the keys and values match their respective types.

The Power of TypeScript Generics

TypeScript generics provide a powerful way to create flexible, type-safe, and reusable components in your projects. By embracing generics, you can write code that's more adaptable to varying data types while maintaining the integrity of your type system.

As you delve deeper into the world of TypeScript, generics become an essential tool in your developer toolkit. They help you create code that's not only more efficient but also more maintainable, saving you time and reducing the chances of bugs and inconsistencies in your projects.

Top comments (0)