Template literal type syntax in Typescript

Introduction

Template literal types let you create new text types by combining other text types. This helps you make flexible and clear type rules.

When you want to build new string types by joining other string types.

When you need to check if a string matches a certain pattern in types.

When you want to create types for formatted strings like URLs or commands.

When you want to reuse parts of string types to avoid repeating code.

Syntax

Typescript

type NewType = `${Type1}${Type2}`;

Use backticks ` around the template.

Inside ${}, put other string or literal types.

Examples

This creates a type for strings starting with 'Hello, ' and ending with '!'.

Typescript

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

This type can be 'onClick', 'onHover', or 'onFocus'.

Typescript

type EventName = `on${'Click' | 'Hover' | 'Focus'}`;

This type matches sizes like '10px' or '2em'.

Typescript

type CssSize = `${number}px` | `${number}em`;

Sample Program

This program defines a type Message that must start with 'Status: ' followed by either 'success' or 'error'. It shows how to use this type with variables.

Typescript

type Status = 'success' | 'error';
type Message = `Status: ${Status}`;

const good: Message = 'Status: success';
const bad: Message = 'Status: error';

// This will cause an error if uncommented:
// const wrong: Message = 'Status: warning';

console.log(good);
console.log(bad);

Important Notes

Template literal types only work with string, number, or boolean literal types inside ${}.

They help catch mistakes early by checking string patterns in types.

Summary

Template literal types build new string types by combining others.

They use backticks and ${} to insert types.

Useful for creating clear and flexible string patterns in types.

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