Template literal type syntax in Typescript - Mini Project: Build & Apply

Using Template Literal Type Syntax in TypeScript

📖 Scenario: You are building a simple system to create personalized greeting messages for users based on their names and the time of day.

🎯 Goal: Create a TypeScript program that uses template literal type syntax to define a type for greeting messages that combine a greeting phrase and a user's name.

📋 What You'll Learn

Create a union type for greeting phrases

Create a union type for user names

Use template literal type syntax to combine greeting phrases and user names into a new type

Create a variable of the combined template literal type

Print the greeting message

💡 Why This Matters

🌍 Real World

Template literal types help create precise string types for messages, URLs, or identifiers in real applications.

💼 Career

Understanding template literal types is useful for TypeScript developers to write safer and more expressive code.

1

Create greeting phrases and user names types

Create a union type called Greeting with the exact values 'Hello', 'Hi', and 'Hey'. Also create a union type called UserName with the exact values 'Alice', 'Bob', and 'Charlie'.

Typescript

// Your code here

Hint

Use the | symbol to create union types with exact string values.

2

Create a template literal type for greeting messages

Create a new type called GreetingMessage using template literal type syntax that combines Greeting and UserName with a comma and space between them, like 'Hello, Alice'.

Typescript

type Greeting = 'Hello' | 'Hi' | 'Hey';
type UserName = 'Alice' | 'Bob' | 'Charlie';
// Your code here

Hint

Use backticks ` and ${} to create template literal types.

3

Create a variable with a greeting message

Create a variable called message of type GreetingMessage and assign it the value 'Hi, Bob'.

Typescript

type Greeting = 'Hello' | 'Hi' | 'Hey';
type UserName = 'Alice' | 'Bob' | 'Charlie';
type GreetingMessage = `${Greeting}, ${UserName}`;
// Your code here

Hint

Declare the variable with the correct type and assign the exact string value.

4

Print the greeting message

Write a console.log statement to print the variable message.

Typescript

type Greeting = 'Hello' | 'Hi' | 'Hey';
type UserName = 'Alice' | 'Bob' | 'Charlie';
type GreetingMessage = `${Greeting}, ${UserName}`;

const message: GreetingMessage = 'Hi, Bob';
// Your code here

Hint

Use console.log(message); to print the message.

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