Back to index

Understanding TypeScript Generics

Marco Pegoraro •

Deep dive into TypeScript generics and how they help you write reusable, type-safe code. Learn practical patterns and real-world examples.

Understanding TypeScript Generics

TypeScript generics allow you to create reusable components that work with multiple types while maintaining type safety. They’re one of the most powerful features in TypeScript.

What Are Generics?

Generics provide a way to create flexible, reusable code that works with different types without sacrificing type safety.

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello");

Common Use Cases

Generic Functions

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

Generic Interfaces

interface Box<T> {
  value: T;
}

const stringBox: Box<string> = { value: "hello" };
const numberBox: Box<number> = { value: 42 };

Generic Classes

class Stack<T> {
  private items: T[] = [];
  
  push(item: T): void {
    this.items.push(item);
  }
  
  pop(): T | undefined {
    return this.items.pop();
  }
}

Best Practices

  1. Use meaningful type parameter names
  2. Add constraints when needed
  3. Don’t over-generalize
  4. Use inference when possible

Generics are essential for building robust TypeScript applications!