Advanced Type Manipulation

Use keyof, typeof, indexed access, mapped types, conditional types, and template literals for real abstractions.

52 min

4 sections

keyof

mapped-types

conditional-types

template-literals

01. Keyof and Indexed Access

Section 1 of 4

keyof and indexed access types let you describe relationships between object keys and property values. This powers safe form fields, table columns, sort keys, and audit changes.

typescript

type Customer = {
  id: string;
  name: string;
  plan: "starter" | "business" | "enterprise";
  seats: number;
};

type CustomerField = keyof Customer;
type CustomerPlan = Customer["plan"];

function readField<T, K extends keyof T>(item: T, key: K): T[K] {
  return item[key];
}

Exercise

Create typed table columns

Practice

Create a Column type where key must be a real property of the row and render receives the correct property type.

Classes, Services, and Decorator Tradeoffs

React and Next.js TypeScript Patterns

Back to Course