Why template literal types are powerful in Typescript - Visual Breakdown

Concept Flow - Why template literal types are powerful

Define base string types

↓

Use template literal types

↓

Combine strings into new types

↓

Create flexible, precise type patterns

↓

Use in functions or variables for type safety

Template literal types take base string types and combine them to create new, precise string patterns that help catch errors and improve code safety.

Execution Sample

Typescript

type Event = "click" | "hover";
type PrefixedEvent = `on${Capitalize<Event>}`;

const e1: PrefixedEvent = "onClick";
const e2: PrefixedEvent = "onHover";

This code creates a new type by adding 'on' prefix and capitalizing event names, then uses it to type variables.

Execution Table

Step	Action	Evaluation	Result
1	Define Event type	"click" | "hover"	Event = "click" | "hover"
2	Apply Capitalize to Event	Capitalize<"click"> = "Click", Capitalize<"hover"> = "Hover"	Capitalized Event = "Click" | "Hover"
3	Create PrefixedEvent type	`on${Capitalized Event}`	PrefixedEvent = "onClick" | "onHover"
4	Assign e1: PrefixedEvent = "onClick"	Check if "onClick" in PrefixedEvent	Valid assignment
5	Assign e2: PrefixedEvent = "onHover"	Check if "onHover" in PrefixedEvent	Valid assignment
6	Try invalid assignment e3: PrefixedEvent = "onclick"	Check if "onclick" in PrefixedEvent	Error: not assignable

💡 Execution stops after type assignments and checks; invalid assignments cause errors.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
Event	undefined	"click" | "hover"	"click" | "hover"	"click" | "hover"
Capitalized Event	undefined	"Click" | "Hover"	"Click" | "Hover"	"Click" | "Hover"
PrefixedEvent	undefined	undefined	"onClick" | "onHover"	"onClick" | "onHover"
e1	undefined	undefined	undefined	"onClick"
e2	undefined	undefined	undefined	"onHover"

Key Moments - 2 Insights

Why can't we assign "onclick" (all lowercase) to e1 of type PrefixedEvent?

Because PrefixedEvent expects "onClick" with capital C, as shown in execution_table step 6, the lowercase "onclick" does not match the exact template literal type.

How does Capitalize<Event> change the original Event type?

It transforms each string in Event by capitalizing the first letter, turning "click" into "Click" and "hover" into "Hover", as shown in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of PrefixedEvent?

A "Click" | "Hover"

B "onclick" | "onhover"

C "onClick" | "onHover"

D "click" | "hover"

💡 Hint

Refer to the 'Result' column in step 3 of execution_table.

At which step does the Capitalize utility type apply to the Event strings?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Check the 'Action' and 'Evaluation' columns in execution_table step 2.

If we change Event to include "scroll", what would PrefixedEvent include?

A "click" | "hover" | "scroll"

B "onClick" | "onHover" | "onScroll"

C "onclick" | "onhover" | "onscroll"

D "Click" | "Hover" | "Scroll"

💡 Hint

PrefixedEvent adds 'on' prefix and capitalizes Event strings, see concept_flow and execution_table steps 2-3.

Concept Snapshot

Template literal types combine string types into new patterns.
Use backticks and ${} to build new string types.
Can apply string modifiers like Capitalize.
Helps create precise, safe string types.
Useful for event names, CSS classes, and more.

Full Transcript

Template literal types in TypeScript let you create new string types by combining existing string types with fixed text. For example, starting with a type Event that can be "click" or "hover", you can create a new type PrefixedEvent that adds "on" before each event and capitalizes the first letter. This results in "onClick" and "onHover" as valid types. When assigning values to variables of type PrefixedEvent, only these exact strings are allowed. This helps catch mistakes like using "onclick" instead of "onClick". The execution steps show how the types are built and checked. Capitalize changes the first letter to uppercase, and the template literal adds the "on" prefix. This powerful feature improves code safety by making string patterns explicit and checked by the compiler.