Template literal with unions in Typescript - Step-by-Step Execution

Concept Flow - Template literal with unions

Define union types

↓

Create template literal type using unions

↓

Use template literal type in variable

↓

Assign valid string matching template

↓

TypeScript checks correctness

↓

Accept or error based on match

This flow shows how TypeScript builds a template literal type from unions and checks if assigned strings match the pattern.

Execution Sample

Typescript

type Color = "red" | "blue";
type Size = "small" | "large";
type Shirt = `${Color}-${Size}`;

let myShirt: Shirt = "red-small";

Defines unions for colors and sizes, combines them into a template literal type, and assigns a valid string.

Execution Table

Step	Action	Evaluation	Result
1	Define union type Color	"red" | "blue"	Color = "red" or "blue"
2	Define union type Size	"small" | "large"	Size = "small" or "large"
3	Create template literal type Shirt	`${Color}-${Size}`	Shirt = "red-small" | "red-large" | "blue-small" | "blue-large"
4	Declare variable myShirt of type Shirt	myShirt: Shirt	myShirt must be one of Shirt strings
5	Assign "red-small" to myShirt	Check if "red-small" in Shirt	Valid assignment, no error
6	Assign "green-small" to myShirt	Check if "green-small" in Shirt	Error: "green-small" not assignable to Shirt

💡 Stops after assignment check; errors if string does not match template literal type.

Variable Tracker

Variable	Start	After Step 5	After Step 6
myShirt	undefined	"red-small"	Error (invalid assignment)

Key Moments - 2 Insights

Why does assigning "green-small" to myShirt cause an error?

Because "green" is not part of the Color union (see execution_table step 6), so "green-small" does not match the Shirt template literal type.

How does TypeScript know which strings are valid for Shirt?

It combines all Color and Size union values into all possible strings using the template literal (execution_table step 3). Only those strings are valid.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of myShirt after step 5?

A "blue-large"

B undefined

C "red-small"

D Error

💡 Hint

Check the variable_tracker row for myShirt after step 5.

At which step does TypeScript detect an invalid assignment?

A Step 6

B Step 5

C Step 4

D Step 3

💡 Hint

See execution_table row describing assignment of "green-small".

If we add "green" to Color union, what happens to the Shirt type?

A It causes a syntax error

B It includes "green-small" and "green-large" strings

C It stays the same

D It removes "red-small" from Shirt

💡 Hint

Refer to execution_table step 3 where Shirt is created from all Color and Size combinations.

Concept Snapshot

Template literal with unions:
- Define unions (e.g., Color = "red" | "blue")
- Create template literal type: type Shirt = `${Color}-${Size}`
- Shirt includes all combinations ("red-small", "blue-large", etc.)
- Assigning strings outside these causes errors
- TypeScript checks assignments at compile time

Full Transcript

This visual trace shows how TypeScript uses union types combined with template literals to create a new string type. First, union types for Color and Size are defined. Then, a template literal type Shirt is created by combining these unions with a dash. Variables of type Shirt can only hold strings matching these combinations. Assigning a string like "red-small" is valid, but "green-small" causes an error because "green" is not in the Color union. The execution table tracks each step, showing how TypeScript builds the type and checks assignments. The variable tracker shows the value of myShirt changing from undefined to "red-small" and then an error on invalid assignment. Key moments clarify why certain assignments fail and how TypeScript generates all valid strings. The quiz tests understanding of these steps and the effect of changing unions.