Why Template literal with unions in Typescript? - Purpose & Use Cases

The Big Idea

What if you could write one line and get all possible string combinations without mistakes?

The Scenario

Imagine you need to create many string combinations by hand, like greeting messages for different people and times of day, writing each possible sentence separately.

The Problem

This manual way is slow and tiring. You might forget some combinations or make typos. Changing one part means rewriting many lines, which wastes time and causes errors.

The Solution

Using template literals with unions lets you define parts of strings as sets of options and combine them automatically. This way, TypeScript helps create all valid combinations without writing each one manually.

Before vs After

✗ Before

type Greeting = 'Hello John' | 'Hello Jane' | 'Good morning John' | 'Good morning Jane';

✓ After

type Time = 'Hello' | 'Good morning';
type Name = 'John' | 'Jane';
type Greeting = `${Time} ${Name}`;

What It Enables

This lets you easily build many string variations safely and quickly, making your code cleaner and less error-prone.

Real Life Example

Think of a website showing personalized greetings based on user name and time of day. Template literal unions generate all valid greetings automatically.

Key Takeaways

Manual string combinations are slow and error-prone.

Template literal unions create all valid string combos automatically.

This makes code easier to write, read, and maintain.