Yashotantra Academy logo
← TypeScript theorytheory 0/50 · 0%
level 1
Curious · 0 XP
streak
0d
perfect
0
badges
0

100 XP to Apprentice

Types · hard

40. Template literal types

Building string types out of unions, like a compile-time string template.

1 min read3 questionsup to 50 XPtopic 40/50

Read in another language

AI translates the explanation and quiz text while preserving code and answer scoring.

Template literal types combine literal strings with unions to generate a set of possible string types, similar to JS template literals but evaluated by the compiler.

ts
type Chain = "eth" | "polygon" | "arb";
type Env = "main" | "test";

type Endpoint = `${Chain}-${Env}.rpc.example.com`;
// "eth-main.rpc.example.com" | "eth-test.rpc.example.com" | "polygon-main.rpc.example.com" | ... (6 combinations)

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<"click">; // "onClick"

Combining a literal union with a template produces the cross-product of all combinations — here 3 chains × 2 environments = 6 possible endpoint strings, each individually valid at the type level. Intrinsic string manipulation types (`Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize`) are often used alongside template literals to transform casing.

How to study this topic

  1. 1. Read the explanation once end to end, skipping the code.
  2. 2. Re-read the code snippets and say out loud what each line does.
  3. 3. Answer the quiz without scrolling back — that is the real check.
  4. 4. Read every explanation, even for the answers you got right.

Scoring

  • · Up to 30 XP from quiz accuracy.
  • · +15 XP for a perfect first attempt.
  • · +5 XP while a 3-day streak is running.
  • · 75% or higher marks the topic complete.

Check your understanding

  1. 1. What does `` `${Chain}-${Env}.rpc.example.com` `` produce when Chain and Env are unions?

  2. 2. What does `Capitalize<T>` do?

  3. 3. How many string literal types does `` `${Chain}-${Env}...` `` produce if Chain has 3 members and Env has 2?

Badges

First light
Pass your first topic
Sharp shooter
3 perfect first-try quizzes
On a roll
Study 3 days in a row
Week warrior
Study 7 days in a row
Grinder
Earn 500 XP
Deep diver
Earn 1500 XP