Generics Deep Dive

🔶 Generics Deep Dive

Generic Constraints: Restricting Type Parameters

By default, a type parameter T can be anything. Constraints let you say "T must satisfy this requirement":

Copyfunction getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];  // ✅ TypeScript knows key exists on T
}

const user = { name: "Alice", age: 30 };
const result = getProperty(user, "name");  // ✅ "name" is valid
// getProperty(user, "email");  // ❌ "email" is not a key of user

Key syntax: K extends keyof T means "K must be a key that exists on T."

Copy// Only works on objects with a specific property type
function pickByType<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

interface Config {
  port: number;
  host: string;
}

const config: Config = { port: 3000, host: "localhost" };
const port = pickByType(config, "port");  // ✅ type is number

// Type inference knows the exact return type based on which key you pick!

Default Type Parameters

Just like function parameters, type parameters can have defaults:

Copytype Result<T = string> = {
  success: boolean;
  data: T;
};

type StringResult = Result;         // T defaults to string
type NumberResult = Result<number>; // T is explicitly number

const response: StringResult = {
  success: true,
  data: "hello"  // No need to specify <string>
};

Variance: Covariance & Contravariance

Variance describes how generic types relate when their type parameters are subtypes of each other. This is subtle but crucial:

Copyclass Animal {}
class Dog extends Animal {}

// Arrays are COVARIANT in their type parameter
const dogs: Dog[] = [new Dog()];
const animals: Animal[] = dogs;  // ✅ Dog[] is assignable to Animal[]

// Functions are CONTRAVARIANT in their parameter type
const feedAnimal = (a: Animal) => { };
const feedDog = (d: Dog) => { };

const callback: (animal: Animal) => void = feedDog;  // ❌ Error!
// A function expecting a Dog can't be used where we pass any Animal

keyof and typeof: Type Introspection

keyof gets property names; typeof gets the type of a value:

Copyconst user = { name: "Alice", age: 30 };

// typeof gets the type of the value
type UserType = typeof user;  // { name: string; age: number }

// keyof gets all property names
type UserKeys = keyof UserType;  // "name" | "age"

// Combine them: create a type that maps keys to their values
type UserValues = UserType[keyof UserType];  // string | number

// Practical: generic object property getter
function createGetter<T, K extends keyof T>(obj: T, key: K) {
  return () => obj[key];
}

Generic Utility Types: The Toolkit

TypeScript provides built-in generic utilities for common transformations:

Copyinterface User {
  id: number;
  name: string;
  email: string;
}

// Partial: make all properties optional
type PartialUser = Partial<User>;

// Pick: select specific properties
type UserPreview = Pick<User, "name" | "email">;

// Omit: exclude specific properties
type UserWithoutId = Omit<User, "id">;

// Record: map keys to a value type
type UserRoles = Record<"admin" | "user" | "guest", User[]>;

// Readonly: make all properties readonly
type ReadOnlyUser = Readonly<User>;

// Extract: types assignable to U from union T
type StringOrNumber = string | number | boolean;
type Strings = Extract<StringOrNumber, string>;  // string

// Exclude: opposite of Extract
type NonStrings = Exclude<StringOrNumber, string>;  // number | boolean

Building Your Own Generic Utilities

Chain utilities and constraints to build powerful reusable patterns:

Copy// Get all parameter types from a function
type Parameters<T extends (...args: any[]) => any> =
  T extends (...args: infer P) => any ? P : never;

const add = (a: number, b: number) => a + b;

type AddParams = Parameters<typeof add>;  // [number, number]

// Now you can build around it
function callWithLogging<T extends (...args: any[]) => any>(
  fn: T,
  ...args: Parameters<T>
) {
  console.log("Calling with", args);
  return fn(...args);
}

Recursive Generics: Types That Call Themselves

Generics can reference themselves for deeply nested structures:

Copy// Make a type recursive: useful for nested data
type NestedArray<T> = T | NestedArray<T>[];

const deep: NestedArray<number> = [
  1,
  [2, 3],
  [4, [5, 6]]  // ✅ Arbitrary nesting is valid
];

// Practical: make object values deeply partial
type DeepPartial<T> = T extends object ? {
  [K in keyof T]?: DeepPartial<T[K]>
} : T;

interface Config {
  db: {
    host: string;
    port: number;
    ssl: {
      cert: string;
    }
  }
}

type PartialConfig = DeepPartial<Config>;  // All properties at all levels optional

🏗️ Real-World Pattern: Generic API Response Handler

Copyinterface ApiResponse<T> {
  status: "success" | "error";
  data?: T;
  error?: string;
}

async function fetchJson<T>(url: string): Promise<T> {
  const response = await fetch(url);
  return response.json();
}

async function getUser(id: number) {
  const user = await fetchJson<{ id: number; name: string }>(
    `/api/users/${id}`
  );
  console.log(user.name);  // ✅ TypeScript knows name exists
}

💻 Coding Challenges

🎯 What's Next

With generics mastered, we'll explore Decorators & Metadata — a powerful (and experimental) feature for attaching type information and behavior to classes and properties.