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.

Practice

1. What does a template literal type in TypeScript do?

easy

A. Defines a function that returns a string.

B. Creates new string types by combining other string types using backticks and ${}.

C. Declares a variable with a fixed string value.

D. Creates a number type from string literals.

Solution

1. Step 1: Understand template literal types

   Template literal types use backticks and ${} to combine string types into new string types.

2. Step 2: Compare options

   Only Creates new string types by combining other string types using backticks and ${}. correctly describes this behavior; others describe unrelated concepts.

3. Final Answer:

   Creates new string types by combining other string types using backticks and ${}. -> Option B

4. Quick Check:

   Template literal types combine strings = A [OK]

Hint: Remember: template literal types build new string types with `${}` [OK]

Common Mistakes:

• Confusing template literal types with string variables
• Thinking template literals create functions
• Assuming they create number types

2. Which of the following is the correct syntax for a template literal type in TypeScript?

easy

A. type Greeting = ${string} world;

B. type Greeting = '${string} world';

C. type Greeting = "${string} world";

D. type Greeting = `${string} world`;

Solution

1. Step 1: Identify correct template literal syntax

   Template literal types use backticks (`) around the string with ${} for type insertion.

2. Step 2: Check each option

   Only `type Greeting = `${string} world`;` uses backticks correctly; the others use single/double quotes or miss backticks.

3. Final Answer:

   type Greeting = `${string} world`; -> Option D

4. Quick Check:

   Backticks + ${} = A [OK]

Hint: Use backticks ``, not quotes, for template literal types [OK]

Common Mistakes:

• Using single or double quotes instead of backticks
• Omitting backticks entirely
• Placing ${} outside backticks

3. Given the code:

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

let greet1: Greeting = "Hello, Alice!";
let greet2: Greeting = "Hello, Charlie!";

Which line causes a TypeScript error?

medium

A. let greet2: Greeting = "Hello, Charlie!";

B. let greet1: Greeting = "Hello, Alice!";

C. Both lines cause errors

D. Neither line causes an error

Solution

1. Step 1: Understand the Greeting type

   Greeting is a template literal type combining "Hello, " with Name ("Alice" or "Bob") and "!".

2. Step 2: Check assigned values

   "Hello, Alice!" matches Greeting, but "Hello, Charlie!" does not because "Charlie" is not in Name.

3. Final Answer:

   let greet2: Greeting = "Hello, Charlie!"; -> Option A

4. Quick Check:

   Invalid string not in union = B [OK]

Hint: Check if inserted string matches union type exactly [OK]

Common Mistakes:

• Assuming any string fits template literal type
• Ignoring union type restrictions
• Confusing variable assignment with type definition

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

type Status = "success" | "error";
type Message = `${Status}` | number;

let msg: Message = 404;

medium

A. There is no error; the code is valid.

B. The template literal type syntax is incorrect; it needs backticks.

C. The variable msg cannot be assigned a number if Message includes number.

D. Template literal types cannot be combined with number types using |.

Solution

1. Step 1: Analyze the type Message

   Message is a union of a template literal type `${Status}` (which is "success" or "error") and number.

2. Step 2: Check variable assignment

   Assigning 404 (a number) to msg is valid because Message includes number.

3. Final Answer:

   There is no error; the code is valid. -> Option A

4. Quick Check:

   Union allows number assignment = D [OK]

Hint: Union types allow multiple types including template literals and numbers [OK]

Common Mistakes:

• Thinking template literals can't be unioned with other types
• Assuming syntax error in template literal usage
• Believing number assignment is invalid here

5. How can you create a type that represents all possible CSS margin properties like "margin-top", "margin-right", "margin-bottom", and "margin-left" using template literal types?

hard

A. type MarginProperty = `margin-${string}`;

B. type MarginProperty = "margin-top" | "margin-right" | "margin-bottom" | "margin-left";

C. type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`;

D. type MarginProperty = `margin-${number}`;

Solution

1. Step 1: Understand the goal

   Create a type for specific margin sides using template literal types with a union of side strings.

2. Step 2: Evaluate options

   type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`; uses template literal with union of exact sides, producing only valid margin properties. type MarginProperty = "margin-top" | "margin-right" | "margin-bottom" | "margin-left"; works but is not using template literals. type MarginProperty = `margin-${string}`; allows any string after "margin-", which is too broad. type MarginProperty = `margin-${number}`; uses number, which is invalid here.

3. Final Answer:

   type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`; -> Option C

4. Quick Check:

   Template literal + union for sides = C [OK]

Hint: Use union inside ${} to limit template literal options [OK]

Common Mistakes:

• Using string instead of union inside template literal
• Listing all options without template literals
• Using number instead of string union