Advanced TypeScript

TypeScript’s type system is Turing-complete, which means it can express arbitrarily complex constraints. Knowing the advanced features lets you encode domain rules directly into types, so incorrect usage becomes a compile error rather than a runtime bug.

Conditional Types and infer

A conditional type chooses between two types based on whether a constraint holds:

type IsArray<T> = T extends any[] ? true : false;
type A = IsArray<string[]>; // true
type B = IsArray<number>;   // false

The infer keyword extracts a type from within a condition, letting you “reach inside” a structure:

type ElementOf<T> = T extends (infer U)[] ? U : never;
type Num = ElementOf<number[]>; // number

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

Mapped Types

Mapped types iterate over a union of keys to produce a new type:

type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Optional<T> = { [K in keyof T]?: T[K] };

// Key remapping with `as`
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

You can filter keys using conditional types inside a mapped type:

type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

Template Literal Types

Template literal types compose string types the same way template literals compose strings:

type EventName = "click" | "focus" | "blur";
type Handler = `on${Capitalize<EventName>}`; // "onClick" | "onFocus" | "onBlur"

type Route = `/api/${string}`;
const endpoint: Route = "/api/users"; // OK

Utility Types

TypeScript ships with built-in generic utility types for common transformations:

type User = { id: number; name: string; email: string };

type PartialUser = Partial<User>;        // all optional
type RequiredUser = Required<PartialUser>; // all required again
type UserPreview = Pick<User, "id" | "name">;
type UserWithoutEmail = Omit<User, "email">;

function getUser(): User { ... }
type GetUserReturn = ReturnType<typeof getUser>; // User

Discriminated Unions and Type Guards

A discriminated union is a union where every member shares a literal property that uniquely identifies it. TypeScript narrows the union when you check that property:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number }
  | { kind: "rect"; width: number; height: number };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
    case "rect":   return s.width * s.height;
    default:
      // Exhaustiveness check — compile error if a case is missing
      const _never: never = s;
      throw new Error("Unhandled shape");
  }
}

A user-defined type guard narrows the type in the caller’s scope using the is return type:

function isCircle(s: Shape): s is { kind: "circle"; radius: number } {
  return s.kind === "circle";
}

Further Learning

Search these terms to go deeper:

• “TypeScript handbook conditional types” — the official deep-dive with distributive behavior and deferred evaluation
• “type-challenges GitHub” — community repo of progressively harder type puzzles to build fluency
• “TypeScript mapped types key remapping” — how as clauses enable key filtering and renaming
• “Matt Pocock Total TypeScript” — premium course and free tips covering all advanced patterns
• “TypeScript discriminated unions exhaustive check” — patterns for safe variant modeling in real applications

Advanced TypeScript

Once you’re comfortable with basic TypeScript, there’s a set of power tools that let you describe complex rules in types — so bad code won’t even compile. This lesson keeps it gentle: the goal is to recognize these tools and use the everyday ones, not to master type wizardry.

Ready-made helper types

TypeScript ships with handy “type transformers.” You give them a type, they give you a tweaked version:

type User = { id: number; name: string; email: string }

type PartialUser = Partial<User>          // every field optional
type Preview = Pick<User, 'id' | 'name'>  // only id and name
type NoEmail = Omit<User, 'email'>        // everything except email

These five are the ones you’ll actually reach for: Partial, Required, Pick, Omit, and ReturnType. They save you from rewriting variations of a type by hand.

Discriminated unions: the most useful pattern

This is the big one worth learning. When something can be one of a few shapes, give each shape a label field. TypeScript then knows exactly which one you have after you check the label:

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; side: number }

function area(s: Shape) {
  switch (s.kind) {
    case 'circle': return Math.PI * s.radius ** 2  // TS knows it has radius
    case 'square': return s.side ** 2              // TS knows it has side
  }
}

A peek at the fancy stuff

TypeScript can also do genuinely advanced things — building types out of other types (mapped types), pattern-matching strings (template literal types), and conditional logic in types. You’ll bump into these in libraries. For now, just know they exist; you can reach for the Expert version when you need them.

// template literal type — a string that must start with /api/
type Route = `/api/${string}`
const ok: Route = '/api/users'   // ✅

In one sentence

Lean on built-in helpers like Partial, Pick, and Omit to reshape types, and use discriminated unions (a shared kind label) to model “one of several shapes” safely.

Want to go deeper?

Switch to Expert mode above for conditional types, infer, mapped types, template literal types, and exhaustive type guards.