Template literal types in Typescript - Step-by-Step Execution

Concept Flow - Template literal types

Define base string types

↓

Create template literal type

↓

Use template literal type in variables

↓

TypeScript checks if values match pattern

↓

Accept or error based on pattern match

Template literal types combine string types with placeholders to create new string patterns that TypeScript can check.

Execution Sample

Typescript

type Greeting = `Hello, ${string}!`;

const greet1: Greeting = "Hello, Alice!";
const greet2: Greeting = "Hello, Bob!";
const greet3: Greeting = "Hi, Charlie!"; // Error

This code defines a template literal type Greeting and assigns strings matching or not matching the pattern.

Execution Table

Step	Action	Value Checked	Type Check Result	Notes
1	Define Greeting type	`Hello, ${string}!`	Type created	Template literal type expects strings starting with 'Hello, ' and ending with '!'
2	Assign greet1	"Hello, Alice!"	Pass	Matches pattern exactly
3	Assign greet2	"Hello, Bob!"	Pass	Matches pattern exactly
4	Assign greet3	"Hi, Charlie!"	Fail	Does not start with 'Hello, ' so error

💡 TypeScript stops checking after error on greet3 assignment due to pattern mismatch

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4
greet1	undefined	"Hello, Alice!"	"Hello, Alice!"	"Hello, Alice!"
greet2	undefined	undefined	"Hello, Bob!"	"Hello, Bob!"
greet3	undefined	undefined	undefined	Error - invalid assignment

Key Moments - 2 Insights

Why does assigning "Hi, Charlie!" to Greeting cause an error?

Because the template literal type Greeting requires the string to start with "Hello, " and end with "!". "Hi, Charlie!" does not match this pattern, as shown in execution_table row 4.

Can template literal types include any string inside the placeholder?

Yes, the ${string} placeholder means any string can appear there, but the surrounding fixed parts must match exactly, as seen in the Greeting type definition and assignments.

Visual Quiz - 3 Questions

Look at the execution_table, what is the type check result for greet2 assignment?

A Fail

B Error

C Pass

D Not checked

💡 Hint

Check execution_table row 3 under 'Type Check Result'

At which step does the type check fail due to pattern mismatch?

A Step 2

B Step 4

C Step 3

D No failure

💡 Hint

See execution_table row 4 'Type Check Result' column

If we change Greeting to `Hi, ${string}!`, what happens to greet3 assignment?

A It passes type check

B It still fails

C It causes a syntax error

D It becomes optional

💡 Hint

Consider how template literal type pattern matches string values in variable_tracker

Concept Snapshot

Template literal types combine fixed strings and placeholders.
Syntax: type NewType = `prefix${string}suffix`;
Variables must match the pattern exactly.
TypeScript checks assignments against this pattern.
Useful for enforcing string formats at compile time.

Full Transcript

Template literal types in TypeScript let you create new string types by combining fixed parts and placeholders. For example, type Greeting = `Hello, ${string}!` means any string starting with 'Hello, ' and ending with '!'. When you assign a value to a variable of this type, TypeScript checks if the string matches the pattern. If it does, the assignment passes; if not, it causes a type error. This helps catch mistakes early by enforcing string formats. In the example, 'Hello, Alice!' and 'Hello, Bob!' pass, but 'Hi, Charlie!' fails because it doesn't start with 'Hello, '. Changing the template literal type changes which strings are accepted.