Template Literal Types

Template literal types build precise string types from a backtick pattern with interpolated types, letting you describe whole families of valid strings — route paths, event names, CSS classes — entirely at compile time.

Learn Template Literal Types in our free TypeScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free TypeScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Think of a fill-in-the-blanks form letter: "Dear ___, your ___ is ready." The fixed words never change; the blanks accept specific values. A template literal type is that form letter at the type level — the literal parts are fixed, and each placeholder restricts what can go in the blank. Hand it a union of options and it prints every valid letter at once.

1. String Types From Patterns

A template literal type uses backticks and {'$ '} placeholders, just like a template string — but it produces a type , not a value. Drop in a literal ( ) and you get an exact string; drop in the string placeholder ( ) and you get "any string matching this shape." At runtime you generate the actual values with ordinary template strings.

2. Unions Distribute Into a Cross Product

The real power appears with unions. When you interpolate a union into a template literal type, TypeScript generates every combination — the cross product. Two unions of two members each produce four string literals. This lets one short type stand in for a large, exact set of valid strings, like every size-color CSS class your design system allows.

3. Intrinsic Transformers: Uppercase & Friends

TypeScript ships four built-in string-literal transformers: , , , and . They operate on string literal types at compile time, and combined with template literals they let you derive related names — turning a key like name into the method name getName with zero runtime cost.

🎯 Your Turn

Event names often follow a pattern. Fill in the blank marked ___ with the fixed suffix, then run it.

No blanks this time — just a brief and a starting outline. Build the getter factory yourself, run it, and check your output against the example in the comments.

Practice quiz

What does a template literal type build?

  • A runtime string
  • A number type
  • A string type from a backtick pattern with interpolated types
  • A class

Answer: A string type from a backtick pattern with interpolated types. It uses backtick-and-placeholder syntax at the type level to describe string shapes.

What does the type accept?

  • Any string that starts with a slash
  • Any string
  • Only the empty string
  • Only the literal '/string'

Answer: Any string that starts with a slash. The 'string' placeholder means any string here, but the leading / is fixed.

What happens when you interpolate a union into a template literal type?

  • It errors
  • It picks the first member
  • It widens to string
  • It distributes, producing the cross product of all combinations

Answer: It distributes, producing the cross product of all combinations. yields all four: sm-red, sm-blue, lg-red, lg-blue.

How many members does combining two 2-member unions produce?

  • 2
  • 4
  • 3
  • 8

Answer: 4. Two unions of N and M members generate N*M string literals - here 2*2 = 4.

What is Capitalize<'hello'>?

  • 'Hello'
  • 'HELLO'
  • 'hello'
  • 'hELLO'

Answer: 'Hello'. Capitalize uppercases the first character: 'Hello'.

Which are the four intrinsic string-manipulation types?

  • Trim, Pad, Split, Join
  • Upper, Lower, First, Last
  • Uppercase, Lowercase, Capitalize, Uncapitalize
  • ToString, ToNumber, ToBool, ToArray

Answer: Uppercase, Lowercase, Capitalize, Uncapitalize. TypeScript ships Uppercase, Lowercase, Capitalize, and Uncapitalize as intrinsics.

Do intrinsic transformers like Capitalize have a runtime form?

  • Yes, they run as functions
  • No - they are type-only; use string methods at runtime
  • Only Uppercase does
  • Yes, in strict mode

Answer: No - they are type-only; use string methods at runtime. They operate on string literal types at compile time; the runtime equivalent is toUpperCase() etc.

What does evaluate to?

  • 'onclick'
  • 'on click'
  • 'Click'
  • 'onClick'

Answer: 'onClick'. Capitalize<'click'> is 'Click', so the result is 'onClick'.

What is a risk of very large unions in template literal types?

  • Runtime crashes
  • The cross product multiplies fast and can slow type-checking
  • They become any
  • They lose precision

Answer: The cross product multiplies fast and can slow type-checking. Two 50-member unions make 2,500 literals; huge unions hurt compile times.

Which is a good practical use of template literal types?

  • Math operations
  • Replacing functions
  • Typing route paths and deriving names like getName from keys
  • Runtime validation

Answer: Typing route paths and deriving names like getName from keys. They encode string conventions (route paths, event/handler names) in the type system.