Our Library class can so far ONLY manage Book objects – what if we want to reuse the SAME pattern (managing stock, searching, checking out) for audiobooks, DVDs, or magazines too, WITHOUT duplicating the class? Generics are the answer: "type parameters" that make a class/function reusable for ANY type.

The problem without generics

function firstElement(list: number[]): number {
  return list[0];
}

function firstElementString(list: string[]): string {
  return list[0];
}
// A separate, near-identical function for EVERY type? That doesn't scale.

The generic solution: a type parameter

function firstElement<T>(list: T[]): T {
  return list[0];
}

firstElement<number>([1, 2, 3]);        // T becomes number
firstElement<string>(['a', 'b']);       // T becomes string
firstElement([true, false]);              // T is AUTOMATICALLY inferred as boolean -
                                           // the angle brackets are usually OMITTABLE

<T> is a PLACEHOLDER for "some type, determined at the actual call site" – T is pure convention (stands for "Type"), any valid identifier works. The DECISIVE advantage over any: TypeScript knows that firstElement([1, 2, 3])'s result is number, NOT any – full type safety is preserved, just generic instead of hardcoded.

In practice: a generic repository

Let's build a generic Repository<T> class that provides the SHARED pattern (managing a list, searching, adding) for ANY medium type:

export class Repository<T> {
  protected items: T[];

  constructor(initialItems: T[] = []) {
    this.items = initialItems;
  }

  all(): readonly T[] {
    return this.items;
  }

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

  count(): number {
    return this.items.length;
  }

  find(predicate: (item: T) => boolean): T | undefined {
    return this.items.find(predicate);
  }
}

import { Repository } from './repository/Repository.js';
import { Book } from './models/Book.js';
import { Audiobook } from './models/Audiobook.js';

const bookRepository = new Repository<Book>();
bookRepository.add(new Book(/* ... */));

const audiobookRepository = new Repository<Audiobook>();
audiobookRepository.add(new Audiobook(/* ... */));

// ONE class, TWO fully type-safe, independent usages -
// bookRepository.find(...) returns Book | undefined, NOT Audiobook | undefined

Repository<Book> and Repository<Audiobook> are two DIFFERENT, specialized versions of the SAME generic class – TypeScript keeps them SEPARATE: bookRepository.find(...) is guaranteed to return a Book | undefined, never an Audiobook.

Generics in functions vs. classes

// Generic function - T is determined FRESH PER CALL:
function lastElement<T>(list: T[]): T | undefined {
  return list[list.length - 1];
}

// Generic class - T is fixed ONCE at new, applies to the ENTIRE instance:
const repo = new Repository<Book>(); // T = Book FOREVER, for THIS repo instance