TypeScript Generics Deep Dive: From Basic Patterns to Production-Grade Type Safety

Why Generics Matter

Generics are one of TypeScript's most powerful features, enabling you to write flexible, reusable code while maintaining type safety.

Basic Generics

Let's start with a simple example:

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

const num = identity(42);        // type: number
const str = identity("hello");   // type: string

The <T> is a type parameter that gets inferred from usage.

Generic Interfaces

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User {
  id: string;
  name: string;
}

const userResponse: ApiResponse<User> = {
  data: { id: "1", name: "John" },
  status: 200,
  message: "Success"
};

Generic Constraints

Sometimes you need to constrain what types can be used:

interface HasId {
  id: string;
}

function findById<T extends HasId>(items: T[], id: string): T | undefined {
  return items.find(item => item.id === id);
}

Practical Example: Type-Safe API Client

type ApiEndpoints = {
  "/users": { response: User[]; params: { limit?: number } };
  "/users/:id": { response: User; params: { id: string } };
  "/posts": { response: Post[]; params: { userId?: string } };
};

async function apiCall<E extends keyof ApiEndpoints>(
  endpoint: E,
  params: ApiEndpoints[E]["params"]
): Promise<ApiEndpoints[E]["response"]> {
  // Implementation
}

// Fully type-safe!
const users = await apiCall("/users", { limit: 10 });
const user = await apiCall("/users/:id", { id: "123" });

Key Takeaways

1. Start simple, basic generics solve most problems
2. Use constraints to narrow down acceptable types
3. Conditional types unlock advanced patterns
4. Mapped types + generics = powerful transformations
5. Don't over-engineer, use generics when you need flexibility

Generics might seem complex at first, but once you understand them, they become an essential tool for writing robust TypeScript code.