Template literal type syntax in Typescript - Step-by-Step Execution

Concept Flow - Template literal type syntax

Define base string types

↓

Use backticks with ${} placeholders

↓

Combine types into new string literal type

↓

Use new type for variables or parameters

↓

TypeScript checks allowed string patterns

Template literal types combine string types using backticks and placeholders to create new string patterns checked by TypeScript.

Execution Sample

Typescript

type Color = "red" | "blue";
type Shade = "light" | "dark";
type ColoredShade = `${Shade} ${Color}`;

let paint: ColoredShade;
paint = "light red"; // OK
paint = "dark blue"; // OK
paint = "bright red"; // Error

This code creates a new string type by combining Shade and Color types, then checks if assigned strings match the pattern.

Execution Table

Step	Action	Evaluation	Result
1	Define Color type	"red" | "blue"	Color can be 'red' or 'blue'
2	Define Shade type	"light" | "dark"	Shade can be 'light' or 'dark'
3	Create ColoredShade type	`${Shade} ${Color}`	Strings like 'light red', 'dark blue' allowed
4	Assign 'light red' to paint	Is 'light red' in ColoredShade?	Yes, assignment OK
5	Assign 'dark blue' to paint	Is 'dark blue' in ColoredShade?	Yes, assignment OK
6	Assign 'bright red' to paint	Is 'bright red' in ColoredShade?	No, TypeScript error

💡 Execution stops after type checking assignments; invalid string causes error.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6
paint	undefined	"light red"	"dark blue"	Error - invalid assignment

Key Moments - 2 Insights

Why does assigning 'bright red' to paint cause an error?

Because 'bright' is not part of the Shade type, so 'bright red' does not match the template literal type ColoredShade (see execution_table step 6).

How does TypeScript know which strings are allowed for paint?

TypeScript combines the Shade and Color types into the template literal type ColoredShade, allowing only strings that match `${Shade} ${Color}` (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What strings are allowed by the ColoredShade type?

A "light green", "dark blue"

B "bright red", "dark blue"

C "light red", "dark blue"

D "bright green", "dark yellow"

💡 Hint

Check the combination of Shade and Color types in execution_table step 3.

At which step does assigning a string not matching the template literal type cause an error?

A Step 5

B Step 6

C Step 4

D No error occurs

💡 Hint

See execution_table step 6 for the invalid assignment.

If we add "medium" to Shade type, which assignment becomes valid?

A "medium red"

B "bright red"

C "dark green"

D "light yellow"

💡 Hint

Refer to variable_tracker and how Shade affects allowed strings.

Concept Snapshot

Template literal types use backticks and ${} to combine string types.
Syntax: type NewType = `${Type1} ${Type2}`;
Allows only strings matching combined patterns.
Useful for strict string formats.
TypeScript checks assignments against these patterns.

Full Transcript

Template literal types in TypeScript let you create new string types by combining existing string types using backticks and placeholders. For example, combining Shade and Color types into a new ColoredShade type means only strings like 'light red' or 'dark blue' are allowed. When you assign a string to a variable of this new type, TypeScript checks if it matches the pattern. If it doesn't, like 'bright red', TypeScript shows an error. This helps catch mistakes early by enforcing specific string formats.