Capitalize, Uppercase, Lowercase, Uncapitalize, event patterns.

Template Literal Types — String Type Manipulation

Template literal types (TypeScript 4.1+) construct string types from other strings and types. Same `${}` syntax as runtime template literals but at the type level. When an interpolated union is used, the result is a union of all combinations. Combined with mapped types and the as clause, they generate entire typed API surfaces. Intrinsic string manipulation types (Uppercase, Lowercase, Capitalize, Uncapitalize) transform string literal type casing.

Interactive Pipeline Flow

UnderstandImplementOptimise

📝 Literal — "hello" type

String literal type: type Color = "red" | "blue". Only these exact strings are valid. Template literals compose string literal types.

Architecture Diagrams

Building a fully-typed event emitter with template literals.

Loading diagram...

Key Design Decisions

📡Template literals generate entire API surfaces

A single mapped type with template literal keys can generate a complete typed event handler interface, getter/setter API, or CSS property set from a small union of strings.

🔍Infer in template literals for URL parsing

Template literal types with infer can parse URL patterns like '/users/:id' at the type level, extracting parameter names as string literal unions — enabling fully typed routing.

🔗Combine with mapped types for maximum power

Template literal types alone are just string construction. Combined with [K in keyof T as \`get${Capitalize<K>}\`], they transform entire object APIs at compile time with zero boilerplate.

Discussion