Type magic,
demystified.

Test your TypeScript instincts with quick-fire challenges, and study 107 patterns across 16 categories side by side.

free · no signup · takes 3 min · or try the sandbox

The spell

type DeepReadonly<T> = {
  readonly [K in keyof T]:
    T[K] extends object
      ? DeepReadonly<T[K]>
      : T[K];
};

type DeepReadonly<T> = {
  readonly [K in keyof T]:
    T[K] extends object
      ? DeepReadonly<T[K]>
      : T[K];
};

Revealed

type DeepReadonly<Settings> = {
  readonly theme: {
    readonly mode: "light" | "dark";
    readonly accent: string;
  };
  readonly notifications: {
    readonly email: boolean;
    readonly push: boolean;
  };
};

type DeepReadonly<Settings> = {
  readonly theme: {
    readonly mode: "light" | "dark";
    readonly accent: string;
  };
  readonly notifications: {
    readonly email: boolean;
    readonly push: boolean;
  };
};

Three paths to mastery

A pattern quiz, a spell book, and a type sandbox.

Play

Pick the better TypeScript pattern in 10 side-by-side code challenges. Daily and weekly seeds included.

Learn

107 patterns across 16 categories. Each shows the fragile approach, the resilient one, and why it matters.

Sandbox

Write TypeScript types and see them fully expanded. Explore utility types, mapped types, conditionals, and more.

Part of the Can't series

Can't Type

TypeScript patterns. You are here.

Can't Maintain

React component API design. Same format, different topic.

Can't Resize

Responsive design patterns. Same format, different topic.

Open source

Built with Next.js, Material UI, and TypeScript. Contributions welcome.

Type magic,demystified.

Three paths to mastery

Type magic,
demystified.