Advanced TypeScript: Mastering the Type System

Q: What are conditional types in TypeScript?

Conditional types use the syntax T extends U ? X : Y to create types that depend on a condition. Combined with the infer keyword, they can extract and transform types dynamically. They are the if/else of TypeScript's type-level language.

Q: What is the infer keyword in TypeScript?

The infer keyword is used inside conditional types to capture and extract a type from a pattern. For example, T extends Promise ? U : T extracts the resolved type U from a Promise. It acts like pattern matching for types.

TypeScript's type system is far more than a way to annotate variables with string or number. It is a complete type-level programming language with conditionals, loops, pattern matching, and recursion. Mastering advanced patterns like conditional types, mapped types, template literal types, and branded types allows you to encode business rules, API contracts, and validation logic directly into the type system. When you do this well, entire categories of runtime bugs become impossible — the compiler catches them before your code ever executes.

TL;DR

TypeScript's advanced type features let you build types that compute, validate, and transform other types. Conditional types act as if/else at the type level. Mapped types iterate over keys to produce new types. Template literal types manipulate strings at compile time. The infer keyword enables pattern matching. Branded types create nominally distinct types from structural primitives. Together, these tools let you encode business logic into the type system itself.

Why This Matters

Basic TypeScript usage — typing function parameters, defining interfaces, using generics — eliminates a large class of bugs. But many real-world bugs slip through basic type annotations. You can still pass a user ID where an order ID is expected (both are strings). You can still construct an invalid API response shape. You can still forget to handle a discriminated union variant.

Advanced type patterns close these gaps. When you brand your IDs, the compiler rejects processOrder(userId) at compile time. When you type your API layer with conditional mapped types, response shapes are guaranteed correct. When you use exhaustive pattern matching with discriminated unions, adding a new variant forces you to handle it everywhere.

The investment in learning these patterns pays off most in codebases with complex domain logic, API boundaries between services, and teams where multiple developers touch the same code. The type system becomes living documentation that the compiler enforces.

How It Works

Conditional Types

Conditional types follow the pattern T extends U ? X : Y — if T is assignable to U, the type resolves to X, otherwise Y. They become powerful when combined with generics and the infer keyword.

typescript

// Basic conditional type
type IsString<T> = T extends string ? true : false;
 
type A = IsString<"hello">; // true
type B = IsString<42>;      // false
 
// Extracting return types with infer
type ReturnOf<T> = T extends (...args: any[]) => infer R ? R : never;
 
type FnReturn = ReturnOf<(x: number) => string>; // string
 
// Extracting Promise inner types
type Awaited<T> = T extends Promise<infer U>
  ? U extends Promise<any>
    ? Awaited<U>  // Recursively unwrap nested promises
    : U
  : T;
 
type ResolvedType = Awaited<Promise<Promise<string>>>; // string

Distributive conditional types are a key behavior to understand. When a conditional type acts on a union, it distributes over each member:

typescript

type ToArray<T> = T extends any ? T[] : never;
 
// Distributes over the union
type Result = ToArray<string | number>;
// = string[] | number[]   (NOT (string | number)[])
 
// Prevent distribution with a tuple wrapper
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
 
type Result2 = ToArrayNonDist<string | number>;
// = (string | number)[]

A practical use case — extracting event handler types from a component props interface:

typescript

type EventHandlers<T> = {
  [K in keyof T as K extends `on${string}` ? K : never]: T[K];
};
 
interface ButtonProps {
  label: string;
  disabled: boolean;
  onClick: (e: MouseEvent) => void;
  onHover: (e: MouseEvent) => void;
  className: string;
}
 
type ButtonEvents = EventHandlers<ButtonProps>;
// { onClick: (e: MouseEvent) => void; onHover: (e: MouseEvent) => void }

Mapped Types

Mapped types iterate over the keys of a type and produce a new type. They are the for-loop of the type system:

typescript

// Make all properties optional
type Partial<T> = {
  [K in keyof T]?: T[K];
};
 
// Make all properties required
type Required<T> = {
  [K in keyof T]-?: T[K];
};
 
// Make all properties readonly
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

Key remapping with as enables powerful transformations:

typescript

// Create getter functions for all properties
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
 
interface User {
  name: string;
  age: number;
  email: string;
}
 
type UserGetters = Getters<User>;
// {
//   getName: () => string;
//   getAge: () => number;
//   getEmail: () => string;
// }
 
// Remove specific property types
type RemoveNullable<T> = {
  [K in keyof T as T[K] extends null | undefined ? never : K]: T[K];
};
 
// Create a type with only methods
type MethodsOnly<T> = {
  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K];
};

Template Literal Types

Template literal types bring string manipulation to the type level:

typescript

// Basic template literal type
type Greeting = `Hello, ${string}!`;
 
const valid: Greeting = "Hello, World!";   // OK
// const invalid: Greeting = "Hi, World!"; // Error
 
// Creating unions from combinations
type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";
type Variant = `${Size}-${Color}`;
// "small-red" | "small-blue" | "small-green" | "medium-red" | ...
 
// Route parameter extraction
type ExtractParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractParams<`/${Rest}`>
    : T extends `${string}:${infer Param}`
      ? Param
      : never;
 
type RouteParams = ExtractParams<"/users/:userId/posts/:postId">;
// "userId" | "postId"
 
// Type-safe route builder
type RouteParamMap<T extends string> = {
  [K in ExtractParams<T>]: string;
};
 
function buildUrl<T extends string>(
  template: T,
  params: RouteParamMap<T>
): string {
  let url: string = template;
  for (const [key, value] of Object.entries(params)) {
    url = url.replace(`:${key}`, value as string);
  }
  return url;
}
 
// Type-safe usage
const url = buildUrl("/users/:userId/posts/:postId", {
  userId: "123",
  postId: "456",
});
// Compile error if you miss a parameter or add an extra one

Branded Types

TypeScript uses structural typing, which means two types with the same shape are interchangeable. Branded types use a phantom property to create nominally distinct types:

typescript

// Brand utility type
type Brand<T, B extends string> = T & { readonly __brand: B };
 
// Create distinct ID types
type UserId = Brand<string, "UserId">;
type OrderId = Brand<string, "OrderId">;
type ProductId = Brand<string, "ProductId">;
 
// Constructor functions that validate and brand
function createUserId(id: string): UserId {
  if (!id.startsWith("usr_")) {
    throw new Error("Invalid user ID format");
  }
  return id as UserId;
}
 
function createOrderId(id: string): OrderId {
  if (!id.startsWith("ord_")) {
    throw new Error("Invalid order ID format");
  }
  return id as OrderId;
}
 
// These are now distinct types
function getUser(id: UserId): Promise<User> {
  // ...
}
 
function getOrder(id: OrderId): Promise<Order> {
  // ...
}
 
const userId = createUserId("usr_abc123");
const orderId = createOrderId("ord_xyz789");
 
getUser(userId);   // OK
// getUser(orderId); // Compile error! OrderId is not assignable to UserId
 
// Branded primitives for units
type Kilometers = Brand<number, "Kilometers">;
type Miles = Brand<number, "Miles">;
type Celsius = Brand<number, "Celsius">;
type Fahrenheit = Brand<number, "Fahrenheit">;
 
function convertToMiles(km: Kilometers): Miles {
  return (km * 0.621371) as Miles;
}
 
// Prevents mixing up units
const distance = 100 as Kilometers;
const miles = convertToMiles(distance); // OK
// const wrong = convertToMiles(100); // Error: number is not Kilometers

Recursive Types

TypeScript supports recursive type definitions, enabling types that describe nested or recursive data structures:

typescript

// Deep partial — makes all nested properties optional
type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;
 
interface Config {
  database: {
    host: string;
    port: number;
    credentials: {
      username: string;
      password: string;
    };
  };
  cache: {
    ttl: number;
    maxSize: number;
  };
}
 
// All nested properties are now optional
type PartialConfig = DeepPartial<Config>;
 
function mergeConfig(base: Config, overrides: DeepPartial<Config>): Config {
  // Deep merge implementation
}
 
// Deep readonly
type DeepReadonly<T> = T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;
 
// JSON type — recursive definition
type JsonValue =
  | string
  | number
  | boolean
  | null
  | JsonValue[]
  | { [key: string]: JsonValue };

Practical Patterns: API Response Types

Combining these techniques creates powerful patterns for real applications:

typescript

// Type-safe API response builder
type ApiEndpoint = {
  path: string;
  method: "GET" | "POST" | "PUT" | "DELETE";
  params?: Record<string, string>;
  body?: unknown;
  response: unknown;
};
 
// Define your API contract
interface ApiContract {
  "/users": {
    GET: { response: User[]; params: { limit?: string; offset?: string } };
    POST: { response: User; body: CreateUserInput };
  };
  "/users/:id": {
    GET: { response: User; params: { id: string } };
    PUT: { response: User; body: UpdateUserInput; params: { id: string } };
    DELETE: { response: void; params: { id: string } };
  };
}
 
// Extract types from the contract
type ApiPaths = keyof ApiContract;
type ApiMethods<P extends ApiPaths> = keyof ApiContract[P];
 
type ApiResponse<
  P extends ApiPaths,
  M extends ApiMethods<P>
> = ApiContract[P][M] extends { response: infer R } ? R : never;
 
type ApiBody<
  P extends ApiPaths,
  M extends ApiMethods<P>
> = ApiContract[P][M] extends { body: infer B } ? B : never;
 
// Type-safe fetch wrapper
async function apiCall<
  P extends ApiPaths,
  M extends ApiMethods<P>
>(
  path: P,
  method: M,
  options?: {
    body?: ApiBody<P, M>;
    params?: Record<string, string>;
  }
): Promise<ApiResponse<P, M>> {
  const response = await fetch(path as string, {
    method: method as string,
    body: options?.body ? JSON.stringify(options.body) : undefined,
    headers: { "Content-Type": "application/json" },
  });
  return response.json();
}
 
// Usage — fully type-safe
const users = await apiCall("/users", "GET");         // User[]
const user = await apiCall("/users/:id", "GET");      // User
const newUser = await apiCall("/users", "POST", {
  body: { name: "John", email: "john@example.com" },  // Type-checked against CreateUserInput
});

Form Validation Types

typescript

// Type-safe form validation schema
type ValidationRule<T> = {
  required?: boolean;
  min?: T extends number ? number : never;
  max?: T extends number ? number : never;
  minLength?: T extends string ? number : never;
  maxLength?: T extends string ? number : never;
  pattern?: T extends string ? RegExp : never;
  custom?: (value: T) => string | null;
};
 
type ValidationSchema<T> = {
  [K in keyof T]: ValidationRule<T[K]>;
};
 
type ValidationErrors<T> = {
  [K in keyof T]?: string;
};
 
function createValidator<T>(schema: ValidationSchema<T>) {
  return function validate(data: T): ValidationErrors<T> {
    const errors: ValidationErrors<T> = {};
 
    for (const key in schema) {
      const rule = schema[key];
      const value = data[key];
 
      if (rule.required && (value === undefined || value === null || value === "")) {
        errors[key] = `${String(key)} is required`;
      }
 
      if (rule.custom) {
        const error = rule.custom(value);
        if (error) errors[key] = error;
      }
    }
 
    return errors;
  };
}
 
// Usage
interface SignupForm {
  name: string;
  email: string;
  age: number;
}
 
const validateSignup = createValidator<SignupForm>({
  name: { required: true, minLength: 2, maxLength: 50 },
  email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  age: { required: true, min: 13, max: 120 },
});

Common Pitfalls

Over-engineering types. If a type takes more than a few seconds to understand, it might be too complex. Types should clarify code, not obscure it. Consider whether a simpler runtime check would be more maintainable.

Ignoring type inference. TypeScript's inference is powerful. You do not need to explicitly annotate every variable. Let TypeScript infer return types for internal functions and only explicitly type public API boundaries.

Not understanding distributive behavior. Conditional types distribute over unions by default. This is often desired but can produce unexpected results. Use the [T] extends [U] pattern when you need non-distributive behavior.

Deep recursive types causing performance issues. TypeScript has a recursion depth limit. Deeply recursive types can slow down the compiler and hit the limit. Test your types with edge cases and consider tail-call optimization patterns.

Using any as an escape hatch. When you reach for any, you disable the type system for that value and everything downstream. Use unknown instead and narrow with type guards. Reserve any for truly dynamic boundaries like JSON parsing, and immediately validate the result.

When to Use (and When Not To)

Use advanced type patterns when:

›You have a complex domain with many similar-but-distinct types (IDs, units, currencies)
›You are building a library or API that other developers will consume
›You need to enforce business rules that are easy to violate at runtime
›Your API layer benefits from generated or contract-first types
›You want to make illegal states unrepresentable

Keep types simple when:

›You are prototyping and the domain is not yet settled
›The added type complexity would make onboarding new team members significantly harder
›Runtime validation is already comprehensive and type-level checks add little value
›The codebase is small enough that the bugs these patterns prevent are unlikely

FAQ

What are conditional types in TypeScript?

Conditional types use the syntax T extends U ? X : Y to create types that depend on a condition. Combined with the infer keyword, they can extract and transform types dynamically. They are the if/else of TypeScript's type-level language.

What are branded types and why use them?

Branded types add a phantom property to primitive types to create distinct types that are structurally identical but nominally different. For example, UserId and OrderId are both strings at runtime but the type system prevents you from accidentally passing one where the other is expected.

How do template literal types work?

Template literal types use the same backtick syntax as JavaScript template literals but at the type level. They can create string literal union types from combinations, parse and validate string patterns, and enforce naming conventions at compile time.

When should I use mapped types?

Use mapped types when you need to transform every property of a type systematically — making all properties optional, readonly, nullable, or transforming their types. They are the for-loop of the type system, iterating over keys and producing a new type.

What is the infer keyword in TypeScript?

The infer keyword is used inside conditional types to capture and extract a type from a pattern. For example, T extends Promise<infer U> ? U : T extracts the resolved type U from a Promise. It acts like pattern matching for types.

Collaboration

Need help with a project?

Let's Build It

I help startups and established companies design, build, and scale world-class digital products. From deep technical architecture to pixel-perfect UI — let's bring your vision to life.

Start a Conversation

Article Author

Sadam Hussain

Senior Full Stack Developer

Senior Full Stack Developer with over 7 years of experience building React, Next.js, Node.js, TypeScript, and AI-powered web platforms.

Advanced TypeScript: Mastering the Type System

Advanced TypeScript: Mastering the Type System

TL;DR

Why This Matters

How It Works

Conditional Types

Mapped Types

Template Literal Types

Branded Types

Recursive Types

Practical Patterns: API Response Types

Form Validation Types

Common Pitfalls

When to Use (and When Not To)

FAQ

Need help with a project?

Let's Build It

Sadam Hussain

Related Articles

How to Design API Contracts Between Micro-Frontends and BFFs

Next.js BFF Architecture

Next.js Cache Components and PPR in Real Apps