Template Literal Types

Template Literal Types construct types by manipulating strings inside template literal types. They build unions of string literals by combining strings dynamically.

Worked example

How it reads

on_${Status} generates on_success | on_error dynamically
They combine literal strings into type definitions directly

Cloud tip: Template literal types make it easy to type CSS class names, event names, or database queries.

index.ts

TYPESCRIPT

type-checked, then run in your browser

Console

Run your code to see its output here.

YOUR TURN

Make type Size = "sm" | "lg" and type Color = "red" | "blue", combine them into type Token with a template literal type, then declare const t: Token = "lg-blue" and log it.

Press Run to check your work.

Practice this →