Day 25/90: Conditional Types - The API Wrapper That Returned any

90 Day TypeScript Challenge: Zero to Production

We built a thin request helper around fetch so every endpoint went through one place that logged, retried, and parsed JSON. The function worked. Then a teammate wrote order.totalCent instead of order.totalCents, the build stayed green, and a customer saw $NaN in their cart. The typo survived tsc because the helper had quietly started returning any.

How a wrapper returns any without anyone deciding it should

The DOM lib types res.json() as Promise<any>. Return that directly, and the any becomes your return type.

async function request(path: string): Promise<any> {
  const res = await fetch(path);
  return res.json();
}

interface Order {
  id: string;
  totalCents: number;
}

const order = await request("/orders/42");
order.totalCent;     // no error: order is any
order.literallyWhatever; // also fine. the compiler has checked out.

Once request returns Promise<any>, await request(...) is any, and any is contagious - every property access on it is legal, so the typo type-checks and every call site loses autocomplete.

Conditional types: a type-level if

A conditional type has the shape T extends U ? X : Y. If T is assignable to U, the result is X; otherwise it is Y. On its own that is a branch. The power comes from pairing it with infer, which pattern-matches a type and captures part of it.

type Unwrap<T> = T extends Promise<infer U> ? U : T;

type One = Unwrap<Promise<Order>>; // Order
type Two = Unwrap<number>;         // number (not a Promise, takes the else branch)

Promise<infer U> means "if T is a Promise of something, name that something U and return it." infer declares a fresh type variable filled in by structural matching. The same idea extracts an array's element type:

type Element<T> = T extends (infer E)[] ? E : T;

type Str = Element<string[]>;  // string
type Same = Element<boolean>;  // boolean

Reattaching the type at the await boundary

Now make the helper generic so the inferred type flows to the caller. I add a status check on the way through:

async function request<T>(path: string): Promise<T> {
  const res = await fetch(path);
  if (!res.ok) {
    throw new Error(`request to ${path} failed with ${res.status}`);
  }
  const parsed = (await res.json()) as T;
  return parsed;
}

const order = await request<Order>("/orders/42");
order.totalCent;
// Property 'totalCent' does not exist on type 'Order'. Did you mean 'totalCents'?

request<Order> returns Promise<Order>, await unwraps it to Order, and the typo is a compile error again - with a "did you mean" suggestion. The await seam is exactly where the caller's type belongs.

Distributive conditional types

Here is the behavior that surprises people: conditional types distribute over unions. When the input is a union, TypeScript checks each member separately and unions the results.

type Unwrapped = Unwrap<Promise<Order> | string>;
// Unwrap<Promise<Order>> | Unwrap<string>  =>  Order | string

That is usually what you want. When it is not, wrap both sides of the extends in a one-tuple to disable distribution:

type IsString<T> = T extends string ? true : false;
type A = IsString<string | number>; // boolean (true | false), checked per member

type IsStringStrict<T> = [T] extends [string] ? true : false;
type B = IsStringStrict<string | number>; // false, the whole union tested at once

[T] extends [U] is the standard idiom for "treat the union as one thing."

Building NonNullable from scratch

With distribution understood, the standard utilities are two-liners. NonNullable<T> strips null and undefined precisely because it distributes and lets them fall to a never branch. Here it is, with a non-nullish member added to the input so you can see the survivors:

type Strip<T> = T extends undefined ? never : T extends null ? never : T;

type Kept = Strip<number | null | undefined | boolean>;
// number tested -> kept; null -> never; undefined -> never; boolean -> kept
// number | never | never | boolean  =>  number | boolean

never vanishes from a union, so the nullish members are simply removed while number and boolean survive. Awaited and ReturnType follow the same recipe: a conditional type with an infer to capture the inner type, leaning on distribution where it helps.

The takeaway

A wrapper that returns any is worse than no wrapper, because it silences the compiler for everyone downstream of it. When res.json() hands you Promise<any>, that is the seam where you make the function generic and recover the caller's type with a conditional type and infer. The $NaN in the cart was the bill for letting any cross a boundary I owned - and a conditional type is how you stop owning that hole.