Cartwheel’s checkout emits events like order.shipped and payment.failed, and its API client builds URLs from patterns like /orders/:orderId/lines/:lineId. Both are strings with structure. Typing them as string means a typo in an event name or a missing path parameter only shows up when a listener never fires or a request 404s. Template literal types let the compiler see the structure.
A template literal type uses the same backtick syntax as JavaScript template strings, but with types in the placeholders:
\ntype OrderStatus = 'processing' | 'shipped' | 'delivered' | 'cancelled' | 'returned';\n\ntype OrderEvent = `order.${OrderStatus}`;\n// 'order.processing' | 'order.shipped' | 'order.delivered' | 'order.cancelled' | 'order.returned'\n\ntype CheckoutEvent = OrderEvent | `payment.${'captured' | 'failed'}`;When a placeholder holds a union, the result has one member per union member. With two placeholders, you get every combination: `${'s' | 'm' | 'l'}-${'red' | 'blue'}` is six strings. This is the feature’s power and its danger, as you will see at the end of the lesson.
Now an event bus can type its event names from the domain types you already have:
\ndeclare function on(event: CheckoutEvent, handler: () => void): void;\n\non('order.shipped', () => {});\non('order.shiped', () => {});\n// Error: Argument of type '\"order.shiped\"' is not assignable to parameter of type 'CheckoutEvent'.Add a status to OrderStatus and order.on-hold becomes a valid event name automatically.
TypeScript ships four intrinsic string types that transform literal types: Uppercase, Lowercase, Capitalize and Uncapitalize. You used Capitalize for setter names in Mapped Types and Key Remapping. Another common use is environment variables and feature flags:
type Feature = 'express-shipping' | 'gift-wrap';\ntype FlagEnvVar = `CHECKOUT_${Uppercase<Feature>}`;\n// 'CHECKOUT_EXPRESS-SHIPPING' | 'CHECKOUT_GIFT-WRAP'They are built into the compiler rather than defined in TypeScript, so you cannot see their source, but they behave like any other generic type.
\nTemplate literal types also work as patterns in a conditional type. Combined with infer, they pull substrings out of a string literal type:
type Method<R> = R extends `${infer M} ${string}` ? M : never;\n\ntype M1 = Method<'POST /orders/:id/cancel'>; // 'POST'The pattern `${infer M} ${string}` means “some text, a space, then anything”. TypeScript matches it against the literal and binds M to the part before the first space.
Here is the type that makes the URL builder safe. It collects every :param in a route pattern:
type PathParams<P extends string> =\n P extends `${string}:${infer Param}/${infer Rest}`\n ? Param | PathParams<Rest>\n : P extends `${string}:${infer Param}`\n ? Param\n : never;\n\ntype P1 = PathParams<'/orders/:orderId/lines/:lineId'>; // 'orderId' | 'lineId'\ntype P2 = PathParams<'/orders'>; // neverRead it as two cases. If there is a parameter followed by more path, capture the parameter and recurse on the rest. If there is a parameter at the end, capture it. Otherwise there are no parameters. When TypeScript matches a pattern, each infer placeholder takes the shortest text that lets the rest of the pattern match, so Param stops at the first /.
The recursion (PathParams<Rest>) is the subject of the next lesson. For now, see what it gives you:
function buildPath<P extends string>(pattern: P, params: Record<PathParams<P>, string | number>): string {\n // Every :param in the pattern has a key in params, by construction.\n const values = params as Record<string, string | number>;\n return pattern.replace(/:(\\w+)/g, (_, name: string) => encodeURIComponent(String(values[name])));\n}\n\nbuildPath('/orders/:orderId/lines/:lineId', { orderId: 1042, lineId: 3 }); // '/orders/1042/lines/3'\nbuildPath('/orders/:orderId/lines/:lineId', { orderId: 1042 });\n// Error: … Property 'lineId' is missing in type '{ orderId: number; }' …P is inferred as the literal pattern, PathParams<P> turns it into the required keys, and Record turns those into the shape of params. A route with no parameters takes {}.
Event names are only half the story; each event also carries a payload. A mapped type with an as clause can build the whole name-to-payload table from the status union in one go:
type OrderEventPayloads = {\n [S in OrderStatus as `order.${S}`]: { orderId: number; status: S };\n};\n\ntype ShippedPayload = OrderEventPayloads['order.shipped'];\n// { orderId: number; status: 'shipped' }The loop runs over statuses, the as clause turns each one into an event name, and the payload type can still refer to the original S. This table is exactly what a typed event emitter needs, and you will build one on top of it in Type-Safe Event Emitters and Builders. Notice that nothing here is new: it is a mapped type, a template literal and an indexed access, combined. Most real type-level code is a few small pieces like these, put together carefully.
In the exercise you will type Cartwheel’s event names and URL builder. Next lesson looks at recursion in types: what it is good for, how deep it can go, and when a simpler type is the better engineering choice.
\n","toc":[{"id":"sec-1","text":"Building strings from types","level":2},{"id":"sec-2","text":"Transforming strings","level":2},{"id":"sec-3","text":"Parsing strings with infer","level":2},{"id":"sec-4","text":"Template literals as keys","level":2}],"takeaways":["A template literal type like`order.${OrderStatus}` builds string literal types, and a union inside it produces every combination.","Uppercase, Lowercase, Capitalize and Uncapitalize are built-in types that transform string literal types.","infer inside a template literal pattern captures substrings, which lets you parse route patterns such as /orders/:orderId at the type level.","${number} and ${string} placeholders accept loose patterns; they document a format but do not validate it strictly.","Unions inside template literals multiply, and TypeScript refuses unions over 100,000 members, so keep the inputs small."],"further":[{"title":"Template Literal Types","url":"https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html"},{"title":"Intrinsic String Manipulation Types","url":"https://www.typescriptlang.org/docs/handbook/utility-types.html#intrinsic-string-manipulation-types"}],"quiz":[{"q":"How many members does `${'s' | 'm' | 'l'}-${'red' | 'blue'}` have?
's-red' | 's-blue' | 'm-red' | …, so the sizes multiply."},{"text":"1, the pattern string itself","why":"Template literal types with literal unions are expanded into concrete strings, not kept as one pattern."}],"answer":1},{"q":"What does PathParams<'/orders/:orderId/lines/:lineId'> give with the recursive definition from the lesson?
'orderId' | 'lineId'","why":"Correct. The first match captures orderId and recurses on lines/:lineId, whose final match captures lineId."},{"text":"':orderId' | ':lineId'","why":"The colon is part of the pattern, outside the infer placeholder, so it is not captured."},{"text":"'orderId' only","why":"That is what you get without the recursive call on Rest; the recursion is what reaches the second parameter."},{"text":"string","why":"infer captures the exact literal substrings, so the result is a union of literals."}],"answer":0},{"q":"Which value is accepted by type Price = ${number}``?
'12.50' that look like money","why":"${number} has no idea about money formats; it accepts anything JavaScript would read back as a number."},{"text":"'1e5' as well as '12.50'","why":"Correct. Any string that JavaScript parses as a number fits, including exponent notation (and even '0x1F'), so it is a loose check."},{"text":"Only integers, because number is not allowed in template literals","why":"number placeholders are allowed and accept decimals too."}],"answer":1},{"q":"A teammate builds `${Locale}/${Currency}/${Category}/${Sku}` from four unions with 40, 30, 15 and 500 members. What happens?
string for the high-cardinality part, or validate at runtime."}],"answer":2}],"exercise":{"kind":"web","mode":"ts","starter":{"ts":"type OrderStatus = 'processing' | 'shipped' | 'delivered' | 'cancelled' | 'returned';\ntype PaymentOutcome = 'captured' | 'failed';\ntype Feature = 'express-shipping' | 'gift-wrap';\n\ntype CheckoutEvent = string;\ntype FlagEnvVar = string;\ntype PathParams= string;\n\nfunction buildPath
(pattern: P, params: Record =\n P extends `${string}:${infer Param}/${infer Rest}`\n ? Param | PathParams (pattern: P, params: Record Use template literal types to type Cartwheel’s strings: Then implement A union inside a template literal expands into one string per member, so both event families are derived from the existing unions. \n
\nCheckoutEvent: order.<status> for every OrderStatus, plus payment.<outcome> for every PaymentOutcome.FlagEnvVar: CHECKOUT_ followed by each Feature in upper case.PathParams<P>: the names of every :param in a route pattern (never when there are none).buildPath(pattern, params) at runtime: replace each :param with its value from params, URL-encoded with encodeURIComponent.`order.${OrderStatus}` expands to one string per status. Uppercase<Feature> works inside a placeholder.","PathParams has two cases: a parameter followed by / and more path (capture it and recurse on the rest), or a parameter at the very end.","At runtime, pattern.replace(/:(\\w+)/g, (_, name) => …) visits each parameter name. Treat params as Record<string, string | number> inside with one commented cast."],"explanation":"Uppercase transforms each feature name. PathParams pattern-matches the route: infer Param captures the text after a colon up to the next /, and the recursive call handles the rest of the path; the final branch catches a parameter at the end. Record<PathParams<P>, …> then makes every parameter a required key of params, so a missing lineId is a compile error rather than a request to /orders/1042/lines/undefined.buildPath fills in every parameter and leaves parameter-free paths alone","encodes":"Parameter values are URL-encoded"}},"words":704,"readMinutes":3}