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

Need a 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

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 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

Need a 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

Need a hint?

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