Template literal type syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a template literal type in TypeScript?

A template literal type lets you create new string types by combining literal strings and other string types using backticks (`) and placeholders (${...}). It works like string templates but for types.

beginner

How do you define a template literal type that combines 'Hello' and a variable name?

You write:
type Greeting = `Hello, ${string}`;
This means Greeting can be any string starting with 'Hello, ' followed by any string.

intermediate

Can template literal types use unions inside placeholders?

Yes! You can use unions inside placeholders to create multiple possible string types. For example:
type Colors = 'red' | 'blue';
type ColorMessage = `Color is ${Colors}`;
This creates 'Color is red' or 'Color is blue'.

intermediate

What happens if you nest template literal types?

You can nest template literals to build complex string types. For example:
type Name = 'Alice' | 'Bob';
type Greeting = `Hello, ${Name}!`;
type ExcitedGreeting = `${Greeting} How are you?`;
This creates types like 'Hello, Alice! How are you?'.

beginner

What is a practical use of template literal types?

They help create precise string types for things like event names, CSS class names, or formatted strings, improving type safety and auto-completion in code.

Which syntax correctly defines a template literal type combining 'user_' and a number string?

A type UserId = `user_${number}`;

B type UserId = 'user_' + number;

C type UserId = `user_` & number;

D type UserId = 'user_' | number;

Template literal types use backticks and placeholders like `${number}` to combine strings and types.

What does this type represent?
type Status = `status_${'success' | 'error'}`;

A Any string starting with 'status_'

B 'success' or 'error'

C 'status_success' or 'status_error'

D 'status_' only

The union inside the placeholder creates two possible string types: 'status_success' and 'status_error'.

Can template literal types include other template literal types inside them?

A No, nesting causes errors.

B Yes, nesting is allowed.

C Only if they are the same type.

D Only with number types.

Template literal types can be nested to build more complex string types.

Which of these is NOT a valid use of template literal types?

A Defining numeric ranges like `1 to 10`

B Combining string unions into formatted strings

C Creating event name types like `on${Capitalize<string>}`

D Building CSS class name types

Template literal types work with strings, not numeric ranges directly.

What TypeScript feature allows placeholders like ${string} inside template literal types?

A Type casting

B Type inference

C Type assertion

D Type interpolation

Type interpolation lets you insert types inside template literal types using ${...}.

Explain how template literal types work and give an example combining a fixed string and a union type.

Think of how string templates work but for types.

Describe a practical scenario where template literal types improve code safety or developer experience.

Consider how you might limit strings to specific patterns.

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