How to fix Template literal type produces union that is too complex in TypeScript

// ❌ This might be flagged as too complex
type Split<S extends string> = S extends `${infer First}${infer Rest}`
  ? [First, ...Split<Rest>]
  : [];

type Result = Split<"abcdefghijklmnopqrstuvwxyz">; // 26-character string

// ✅ Better: Explicit length limit
type Split<
  S extends string,
  MaxDepth extends readonly any[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  Acc extends string[] = []
> = MaxDepth extends readonly [infer _ extends any, ...infer Rest]
  ? S extends `${infer First}${infer Remainder}`
    ? Split<Remainder, Rest, [...Acc, First]>
    : Acc
  : Acc;

// Usage with limit
type Result = Split<"hello">; // ["h", "e", "l", "l", "o"]
type LongResult = Split<"abcdefghijklmnopqrstuvwxyz">; // Only processes first 10 chars

// ❌ Character-by-character (expensive)
type Reverse<S extends string> = S extends `${infer First}${infer Rest}`
  ? `${Reverse<Rest>}${First}`
  : S;

// ✅ Better: Use built-in string utilities or runtime
type Reverse<S extends string> = string; // Accept any string

// Or use a simpler approach
type LastChar<S extends string> = S extends `${string}${infer Last}` ? Last : S;
type FirstChar<S extends string> = S extends `${infer First}${string}` ? First : S;

// ❌ Distributive - creates union explosion
type ExtractPrefix<T extends string> = T extends `${infer Prefix}-${string}`
  ? Prefix
  : never;

type Result = ExtractPrefix<"foo-bar" | "baz-qux" | "quux-corge">;
// Evaluates to: "foo" | "baz" | "quux" (but can explode with complex unions)

// ✅ Better: Non-distributive
type ExtractPrefix<T extends string> = [T] extends [`${infer Prefix}-${string}`]
  ? Prefix
  : never;

// ❌ One complex type
type ParseRoute<T extends string> = T extends `/${infer Segment}/${infer Rest}`
  ? [Segment, ...ParseRoute<`/${Rest}`>]
  : T extends `/${infer Segment}`
  ? [Segment]
  : [];

// ✅ Better: Separate helpers
type ExtractSegment<T extends string> = T extends `/${infer Segment}${infer Rest}`
  ? { segment: Segment; rest: Rest }
  : never;

type ParseSegments<T extends string, Acc extends string[] = []> =
  ExtractSegment<T> extends { segment: infer S extends string; rest: infer R extends string }
    ? ParseSegments<R, [...Acc, S]>
    : Acc;

// ✅ Good: Validation only
type IsKebabCase<S extends string> = S extends `${string}-${string}`
  ? true
  : false;

type ValidRoute<S extends string> = S extends `/${string}`
  ? S
  : never;

// Runtime transformation
function toKebabCase(str: string): string {
  return str.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
}

npm install --save-dev typescript@latest

npx tsc --noEmit

// Should work without errors
type Test1 = Split<"hello">;
type Test2 = ExtractPrefix<"foo-bar">;
type Test3 = IsKebabCase<"my-component">;