TypeScript Academy · Lesson

Modeling Structured Strings

Enforce formats like event names and route paths.

Modeling Structured Strings is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Enforcing String Formats

Many strings in real apps follow a structure: event handler names, API route paths, CSS variables. Template literal types let you model these formats so the compiler enforces them.

Modeling Event Handler Names

A handler name often looks like on plus a capitalized event. Using the intrinsic Capitalize helper inside a template, the event 'click' maps to the handler name 'onClick'.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Why Capitalize Matters Here

Without Capitalize, the template would yield 'onclick'. The intrinsic type uppercases the first character of the literal, producing idiomatic camelCase handler names.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

Generating a Handlers Map

Combine template literal keys with a mapped type to generate an object type of handlers — one typed function per event, with correctly cased names.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Modeling Route Paths

API routes share a shape like a leading slash, a resource, and an id segment. A template combining fixed text with a placeholder captures valid paths.

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

Parameterized Paths

Add a placeholder for a dynamic id. A template like a slash, resource, slash, then a generic id segment models paths such as a users path followed by a numeric id.

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Enforcing Formats at Compile Time

By typing a parameter as a template literal type, you reject any string that does not fit the structure — a guardrail against malformed routes or keys.

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

Composing CSS Variable Names

CSS custom properties follow a naming scheme. A template with two leading dashes and a token placeholder models names like a color token variable.

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Splitting With Inference

Template literal types can also parse: with conditional types and infer, you extract pieces of a structured string at the type level — for example pulling the method out of an endpoint string.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Real-World Payoff

Structured-string types catch entire classes of bugs: a misspelled handler name, an unknown route, a wrong CSS token — all become compile errors instead of silent runtime failures.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Keep Them Readable

Powerful as they are, deeply nested template types hurt readability. Name intermediate type aliases so the structure stays clear to the next reader.

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

Quick Check

Test your understanding of modeling structured strings.

Recap

Template literal types model structured strings — handler names (on + Capitalize of an event), route paths, and CSS variables — and enforce those formats at compile time. Combined with mapped types they generate handler maps, and with conditional types plus infer they parse strings. Name intermediate aliases to keep complex patterns readable.

Frequently asked questions

Is the “Modeling Structured Strings” lesson free?

Yes — the full text of “Modeling Structured Strings” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Modeling Structured Strings”?

Enforce formats like event names and route paths. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Modeling Structured Strings” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy