TypeScript Generics — Complete Interview Guide

Why Generics Exist

Consider a simple identity function. Without generics you must choose between losing type information (using any) or duplicating code (one function per type):

// Bad: any destroys type safety
function identity(arg: any): any {
  return arg;
}
const result = identity("hello"); // result is 'any', not 'string'

// Bad: duplication
function identityString(arg: string): string { return arg; }
function identityNumber(arg: number): number { return arg; }

// Good: one generic function, full type safety
function identity<T>(arg: T): T {
  return arg;
}
const s = identity("hello"); // s is 'string'
const n = identity(42);      // n is 'number'
const u = identity({ id: 1 }); // u is '{ id: number }'

Generic Constraints with extends

Unconstrained generics give you no information about what T supports. Constraints narrow what types are acceptable and unlock properties on T:

// Without constraint — cannot access .length, T could be anything
function logLength<T>(arg: T): T {
  console.log(arg.length); // Error: Property 'length' does not exist on type 'T'
  return arg;
}

// With constraint — T must have a length property
function logLength<T extends { length: number }>(arg: T): T {
  console.log(arg.length); // OK
  return arg;
}

logLength("hello");       // OK — strings have length
logLength([1, 2, 3]);     // OK — arrays have length
logLength({ length: 10 }); // OK — object with length property
logLength(42);            // Error — numbers have no length

The keyof Constraint Pattern

One of the most useful generic patterns: ensuring a key argument actually exists on the object type:

// K must be a key of T — prevents typos and missing-property bugs at compile time
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 1, name: "Alice", email: "alice@example.com" };

const name = getProperty(user, "name");  // type is string
const id   = getProperty(user, "id");    // type is number
getProperty(user, "phone"); // Error: Argument of type '"phone"' is not assignable
                            // to parameter of type '"id" | "name" | "email"'

Generic Interfaces and Types

// Generic interface — describes a typed API response
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
  timestamp: Date;
}

// Usage — T is filled in at the call site
type UserResponse  = ApiResponse<User>;
type ProductsResponse = ApiResponse<Product[]>;

// Generic type alias — a reusable Result type (Rust-style)
type Result<T, E = Error> =
  | { ok: true;  value: T }
  | { ok: false; error: E };

// Narrowing works naturally with discriminated unions
function handleResult(r: Result<User>) {
  if (r.ok) {
    console.log(r.value.name); // r.value is User
  } else {
    console.error(r.error.message); // r.error is Error
  }
}

Generic Classes

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

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

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }

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

const numStack = new Stack<number>();
numStack.push(1);
numStack.push(2);
numStack.push("three"); // Error — string not assignable to number

const strStack = new Stack<string>();
strStack.push("hello"); // OK

Default Type Parameters

TypeScript 2.3+ supports default types for generics, making them optional at the call site:

// E defaults to Error if not supplied
type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };

// Both are valid
type StringResult = Result<string>;        // E = Error
type CustomResult = Result<string, string>; // E = string

// Generic with default in function
function createPair<A, B = A>(first: A, second?: B): [A, B | undefined] {
  return [first, second];
}

Multiple Type Parameters and Inference

// TypeScript infers T and U from the arguments — no need to annotate at call site
function zip<T, U>(a: T[], b: U[]): [T, U][] {
  return a.map((item, i) => [item, b[i]]);
}

const pairs = zip([1, 2, 3], ["a", "b", "c"]);
// pairs is inferred as [number, string][] — no annotation needed

// Curried generic for partial application
const makeTransform = <T>() => <U>(fn: (input: T) => U) => fn;
const stringTransform = makeTransform<string>();
const toNumber = stringTransform(s => parseInt(s, 10)); // (s: string) => number