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.

Practice

1. What is the main benefit of using template literal types in TypeScript?

easy

A. They allow creating new string types by combining existing ones.

B. They execute string concatenation at runtime.

C. They replace all string types with numbers.

D. They disable type checking for strings.

Solution

1. Step 1: Understand template literal types purpose

   Template literal types combine string types to form new string types at compile time.

2. Step 2: Compare options with this purpose

   Only They allow creating new string types by combining existing ones. correctly describes this benefit; others describe runtime behavior or incorrect features.

3. Final Answer:

   They allow creating new string types by combining existing ones. -> Option A

4. Quick Check:

   Template literal types build new string types = A [OK]

Hint: Remember: template literal types create new string types, not runtime strings [OK]

Common Mistakes:

• Confusing template literal types with runtime string concatenation
• Thinking they disable type checking
• Assuming they convert strings to numbers

2. Which of the following is the correct syntax to define a template literal type combining 'hello' and a variable T?

easy

A. type Greet = hello${T};

B. type Greet = `hello + ${T}`;

C. type Greet = 'hello' + T;

D. type Greet = `hello${T}`;

Solution

1. Step 1: Recall template literal type syntax

   Template literal types use backticks with placeholders like ${T} inside, no plus signs.

2. Step 2: Check each option's syntax

   type Greet = `hello${T}`; correctly uses backticks and ${T} without extra symbols; others have syntax errors.

3. Final Answer:

   type Greet = `hello${T}`; -> Option D

4. Quick Check:

   Correct template literal syntax uses backticks and ${} = A [OK]

Hint: Use backticks and ${} for variables inside template literal types [OK]

Common Mistakes:

• Using plus signs inside template literal types
• Omitting backticks
• Not wrapping variable in ${}

3. What is the resulting type of this TypeScript code?

type Name = 'Alice' | 'Bob';
type Greeting = `Hello, ${Name}!`;

medium

A. `Hello!`

B. `Hello, Name!`

C. `Hello, Alice!` | `Hello, Bob!`

D. `Hello, ${Name}!`

Solution

1. Step 1: Understand union substitution in template literal types

   The union 'Alice' | 'Bob' substitutes into the template, creating a union of strings.

2. Step 2: Form the combined type

   Resulting type is `Hello, Alice!` | `Hello, Bob!`, combining each union member with the template.

3. Final Answer:

   `Hello, Alice!` | `Hello, Bob!` -> Option C

4. Quick Check:

   Union expands inside template literals = D [OK]

Hint: Union types inside template literals create unions of all combinations [OK]

Common Mistakes:

• Thinking the union stays as a single string with ${Name}
• Ignoring union expansion
• Confusing template literal type with runtime string

4. Identify the error in this TypeScript code using template literal types:

type Status = 'success' | 'error';
type Message = `Status: ${Status}`;

const msg: Message = 'Status: fail';

medium

A. Template literal types cannot use unions.

B. Assigning 'Status: fail' is invalid because 'fail' is not in Status union.

C. Backticks are missing around the string assignment.

D. The variable msg should be a number, not a string.

Solution

1. Step 1: Check allowed values for Message type

   Message type expands to 'Status: success' | 'Status: error' only.

2. Step 2: Validate assigned value

   Assigned string 'Status: fail' is not part of the allowed union, causing a type error.

3. Final Answer:

   Assigning 'Status: fail' is invalid because 'fail' is not in Status union. -> Option B

4. Quick Check:

   Assigned string must match template literal union = B [OK]

Hint: Check if assigned string matches all union members in template literal type [OK]

Common Mistakes:

• Assuming any string fits template literal type
• Thinking unions can't be used in template literals
• Ignoring type mismatch errors

5. Given these types:

type Event = 'click' | 'hover';
type Element = 'button' | 'link';
type EventName = `${Element}_${Event}`;

Which of the following is NOT assignable to a variable of type EventName?

hard

A. 'button_focus'

B. 'link_hover'

C. 'button_click'

D. 'link_click'

Solution

1. Step 1: Understand EventName type combinations

   EventName combines Element and Event with underscore, so valid values are 'button_click', 'button_hover', 'link_click', 'link_hover'.

2. Step 2: Identify invalid assignment

   'button_focus' is invalid because 'focus' is not in Event union.

3. Final Answer:

   'button_focus' -> Option A

4. Quick Check:

   Only combinations of Element and Event are valid = C [OK]

Hint: Check if both parts of template literal are in their unions [OK]

Common Mistakes:

• Assuming any string with underscore is valid
• Ignoring union members in template literal types
• Confusing runtime strings with type literals