Template literal with unions in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a template literal type in TypeScript?

A template literal type lets you create new string types by combining unions of string literals with template strings, similar to how template literals work in JavaScript but at the type level.

intermediate

How do unions work with template literal types?

Unions allow multiple string literal types to be combined. When used inside a template literal type, TypeScript creates all possible combinations of those union members as new string literal types.

beginner

Example: What is the resulting type of `type Greeting = `${'Hello' | 'Hi'}, ${'Alice' | 'Bob'}``?

The type Greeting is a union of these string literals: 'Hello, Alice', 'Hello, Bob', 'Hi, Alice', and 'Hi, Bob'.

intermediate

Why use template literal types with unions?

They help create precise string types that represent all valid combinations, improving type safety and autocomplete suggestions in your code.

advanced

Can template literal types with unions be nested?

Yes, you can nest unions inside template literals multiple times to build complex string types representing many combinations.

What does the TypeScript type `type T = `${'a' | 'b'}${'1' | '2'}`` represent?

A 'a1' & 'a2' & 'b1' & 'b2'

B 'a' | 'b' | '1' | '2'

C A single string 'ab12'

D 'a1' | 'a2' | 'b1' | 'b2'

The template literal with unions creates all combinations of the union members, so it results in the union of 'a1', 'a2', 'b1', and 'b2'.

Which keyword is used to combine multiple string literal types in TypeScript?

A union (|)

B intersection (&)

C extends

D implements

The union operator (|) combines multiple string literal types into one union type.

Can template literal types only use string literals inside the template?

A Only numbers can be used

B No, any type can be used

C Yes, only string literals or unions of string literals

D Only boolean values can be used

Template literal types work with string literals or unions of string literals to produce new string literal types.

What is the benefit of using template literal types with unions?

A They create precise string types representing all valid combinations

B They improve runtime performance

C They allow dynamic string concatenation at runtime

D They replace interfaces

Template literal types with unions help define exact string types for better type safety and autocomplete.

If you have `type Colors = 'red' | 'blue'` and `type Shades = 'light' | 'dark'`, what does `type ColoredShade = `${Shades} ${Colors}`` produce?

A 'red light' | 'blue light' | 'red dark' | 'blue dark'

B 'light red' | 'light blue' | 'dark red' | 'dark blue'

C 'lightred' | 'lightblue' | 'darkred' | 'darkblue'

D An error

The template literal combines each shade with each color separated by a space, producing all combinations.

Explain how template literal types work with unions in TypeScript and give a simple example.

Think about how strings combine in JavaScript template literals but at the type level.

Describe a practical use case where template literal types with unions improve your TypeScript code.

Consider situations where you want to restrict strings to specific patterns.