Utility types in practice

The generics lesson listed the common utility types. This one is about using them well, and about what each one does not promise.

Shapes derived from a shape

Given one User type, most of the others in an application are views of it:

interface User { id: string; name: string; email: string; plan: "free" | "pro" }

type UserPatch   = Partial<Omit<User, "id">>;      // any subset, id excluded
type UserSummary = Pick<User, "id" | "name">;      // a narrow view
type UsersById   = Record<string, User>;           // a lookup table
type FrozenUser  = Readonly<User>;                 // no assignments

Deriving them means a change to User flows everywhere. Writing them out by hand means four types to keep in sync.

Partial allows undefined, not just absence

Partial<T> makes each property optional, and under default settings an optional property also accepts an explicit undefined. A patch built from a form or a query string often has exactly that, and spreading it overwrites the field:

1interface User {2  name: string;3  email: string;4  plan: "free" | "pro";5}6 7function update(user: User, patch: Partial<User>): User {8  return { ...user, ...patch };9}10 11export function run(): unknown[] {12  const user: User = { name: "Nino", email: "nino@example.com", plan: "free" };13 14  const upgraded = update(user, { plan: "pro" });15 16  // Partial<User> allows a key that is present but undefined, and spread copies it.17  const blanked = update(user, { name: undefined });18 19  return [upgraded, "name" in blanked, String(blanked.name)];20}

Either skip undefined values when applying the patch, or turn on exactOptionalPropertyTypes so the type forbids an explicit undefined.

Readonly is not freeze

Readonly<T> blocks assignment through that type. Object.freeze blocks it at runtime. Only one of them survives a cast:

1interface Point {2  x: number;3  y: number;4}5 6export function run(): string[] {7  const typed: Readonly<Point> = { x: 1, y: 2 };8  const frozen = Object.freeze({ x: 1, y: 2 });9  const out: string[] = [];10 11  try {12    (typed as Point).x = 99;13    out.push(`Readonly: x is now ${typed.x}`);14  } catch (e) {15    out.push(`Readonly: ${String(e)}`);16  }17 18  try {19    (frozen as Point).x = 99;20    out.push(`frozen: x is now ${frozen.x}`);21  } catch (e) {22    out.push(`frozen: ${String(e)}`);23  }24  return out;25}

The frozen object throws because module code runs in strict mode; in sloppy-mode scripts the assignment is silently ignored instead. Both Readonly and Object.freeze are shallow: nested objects stay mutable.

Types derived from functions

ReturnType<typeof f> and Parameters<typeof f> read a function's types, and Awaited<T> unwraps a promise (recursively). They let the implementation be the source of truth:

1function createInvoice(customer: string, lines: { price: number; qty: number }[]) {2  const total = lines.reduce((sum, l) => sum + l.price * l.qty, 0);3  return { customer, total, currency: "EUR" as const };4}5 6// Derived from the function, so they cannot drift away from it.7type Invoice = ReturnType<typeof createInvoice>;8type InvoiceInput = Parameters<typeof createInvoice>;9 10export function run(): Invoice[] {11  const inputs: InvoiceInput[] = [12    ["Nino", [{ price: 10, qty: 2 }]],13    ["Luka", [{ price: 5, qty: 1 }, { price: 7, qty: 3 }]],14  ];15  return inputs.map((args) => createInvoice(...args));16}

For an async function, the result type is Awaited<ReturnType<typeof loadUser>>.

keyof and indexed access

The building blocks under all of these: keyof T is the union of T's keys, and T[K] is the type of property K. Together they type a helper whose result depends on the key passed:

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
get(user, "plan");   // "free" | "pro"
get(user, "nmae");   // compile error: not a key of User

Common mistakes

• Spreading a Partial patch blindly. An explicit undefined wipes the field, as the first example shows.
• Expecting Readonly to stop mutation. A cast or a mutable alias gets through; only Object.freeze holds at runtime, and only one level deep.
• Omit with a misspelt key. Omit<User, "emial"> is not an error (its key parameter accepts any string) and removes nothing. Pick does check its keys.
• Rewriting a function's return type by hand. It drifts; derive it with ReturnType instead.