Template literal with unions in Typescript - Mini Project: Build & Apply

Template literal with unions

📖 Scenario: You are building a simple greeting system that creates personalized messages based on a person's name and the time of day.

🎯 Goal: Create a TypeScript program that uses template literal types combined with union types to generate greeting messages.

📋 What You'll Learn

Use union types for names and times of day

Use a template literal type to combine the unions into greeting messages

Create a variable with the combined greeting type

Print the greeting message

💡 Why This Matters

🌍 Real World

Template literal types with unions help create precise string types for things like personalized messages, URLs, or CSS class names.

💼 Career

Understanding template literal types is useful for TypeScript developers to write safer and more expressive code, especially in UI and API development.

1

Create union types for names and times of day

Create a union type called Name with the values 'Alice' and 'Bob'. Then create a union type called TimeOfDay with the values 'morning' and 'evening'.

Typescript

# Create union types Name and TimeOfDay
// Your code here

Need a hint?

Use the pipe symbol | to create union types in TypeScript.

2

Create a template literal type for greetings

Create a template literal type called Greeting that combines Name and TimeOfDay into strings like 'Good morning, Alice!' or 'Good evening, Bob!'.

Typescript

type Name = 'Alice' | 'Bob';
type TimeOfDay = 'morning' | 'evening';
// Create template literal type Greeting
// Your code here

Need a hint?

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

3

Create a variable with a greeting message

Create a variable called message of type Greeting and assign it the value 'Good morning, Alice!'.

Typescript

type Name = 'Alice' | 'Bob';
type TimeOfDay = 'morning' | 'evening';
type Greeting = `Good ${TimeOfDay}, ${Name}!`;
// Create variable message with type Greeting and value 'Good morning, Alice!'
// Your code here

Need a hint?

Declare the variable with const and specify the type Greeting.

4

Print the greeting message

Use console.log to print the variable message.

Typescript

type Name = 'Alice' | 'Bob';
type TimeOfDay = 'morning' | 'evening';
type Greeting = `Good ${TimeOfDay}, ${Name}!`;

const message: Greeting = 'Good morning, Alice!';
// Print the message
// Your code here

Need a hint?

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