typescript 48 lines · 8 steps

Type-level string parsing in TypeScript

A toolkit of recursive conditional types that splits, trims, and reshapes string literals entirely at the type level.

Explained by highlit
Advanced template literal types conditional types recursive types mapped types type inference
1type Split<S extends string, D extends string> =
2 S extends `${infer Head}${D}${infer Tail}`
3 ? [Head, ...Split<Tail, D>]
4 : [S];
5 
6type Trim<S extends string> =
7 S extends ` ${infer R}` ? Trim<R> :
8 S extends `${infer L} ` ? Trim<L> :
9 S;
10 
11type ExtractParams<Path extends string> =
12 Path extends `${string}:${infer Param}/${infer Rest}`
13 ? Param | ExtractParams<`/${Rest}`>
14 : Path extends `${string}:${infer Param}`
15 ? Param
16 : never;
17 
18type RouteParams<Path extends string> = {
19 [K in ExtractParams<Path>]: string;
20};
21 
22type Capitalize<S extends string> =
23 S extends `${infer First}${infer Rest}`
24 ? `${Uppercase<First>}${Rest}`
25 : S;
26 
27type CamelCase<S extends string> =
28 S extends `${infer Head}_${infer Tail}`
29 ? `${Head}${Capitalize<CamelCase<Tail>>}`
30 : S;
31 
32type CamelKeys<T> = {
33 [K in keyof T as K extends string ? CamelCase<K> : K]: T[K];
34};
35 
36type HexColor = `#${string}`;
37type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
38type Endpoint = `${HttpMethod} /${string}`;
39 
40export type {
41 Split,
42 Trim,
43 RouteParams,
44 CamelCase,
45 CamelKeys,
46 HexColor,
47 Endpoint,
48};
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Template literal patterns with `infer` let you destructure strings into pieces the type checker can manipulate.
  2. 2Recursion plus a base case is how type-level computation iterates over a string until nothing matches.
  3. 3Key remapping in mapped types can transform property names while preserving their value types.

Related explainers

typescript 
import {
  CallHandler,
  ExecutionContext,
  Injectable,

Wrapping responses in a NestJS interceptor

interceptors rxjs response-shaping
Intermediate 7 steps
typescript 
type RetryOptions = {
  retries?: number;
  timeoutMs?: number;
  baseDelayMs?: number;

Retry with timeout and backoff in TypeScript

promises retry exponential-backoff
Intermediate 10 steps
typescript 
import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers
Advanced 10 steps
typescript 
const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
  { amount: 60, unit: "seconds" },
  { amount: 60, unit: "minutes" },
  { amount: 24, unit: "hours" },

Human-readable relative times with Intl

internationalization date-formatting lookup-table
Intermediate 7 steps
typescript 
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';

Reactive type-ahead search in Angular

rxjs reactive-forms debounce
Intermediate 9 steps
typescript 
function throttle<T extends (...args: any[]) => void>(
  fn: T,
  limit: number
): (...args: Parameters<T>) => void {

Building a trailing-edge throttle in TypeScript

throttling closures generics
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Type-level string parsing in TypeScript — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code