Template literal with unions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of template literal with union types

What is the output of the following TypeScript code when compiled to JavaScript and run?

Typescript

type Color = "red" | "blue";
type Size = "small" | "large";

function describe(color: Color, size: Size): string {
  return `${color}-${size}`;
}

console.log(describe("red", "large"));

A TypeError at runtime

B "red large"

C "redlarge"

D "red-large"

💡 Hint

Look at how template literals combine strings and variables.

The template literal `${color}-${size}` combines the two string values with a dash in between, so the output is "red-large".

🧠 Conceptual

intermediate

Possible values of a template literal union type

Given the following TypeScript type, how many possible string values does the type `Message` represent?

Typescript

type Status = "success" | "error";
type Action = "save" | "delete";
type Message = `${Status}_${Action}`;

A 4

B 2

C 3

D 1

💡 Hint

Count all combinations of Status and Action joined by an underscore.

There are 2 Status values and 2 Action values, so 2 * 2 = 4 possible strings: "success_save", "success_delete", "error_save", "error_delete".

🔧 Debug

advanced

Why does this template literal union type cause an error?

Consider this TypeScript code snippet. Why does it cause a type error?

Typescript

type A = "x" | "y";
type B = "1" | "2";
type C = `${A | B}`;

const val: C = "x";

A The variable val is assigned a value not in type C

B The type C includes values not assignable to "x"

C The union inside the template literal is invalid syntax

D Template literals cannot use union types

💡 Hint

Check what values type C actually includes.

The type `${A | B}` is equivalent to "x" | "y" | "1" | "2" as strings, so val = "x" is valid. But the error is because the union inside the template literal is interpreted as a union of strings, not a concatenation. So C is just the union of the strings, not combined strings.

❓ Predict Output

advanced

Output of nested template literal with unions

What is the output of this TypeScript code when compiled and run as JavaScript?

Typescript

type Prefix = "get" | "set";
type Property = "Name" | "Age";

function makeKey(prefix: Prefix, prop: Property): string {
  return `${prefix}${prop}`;
}

console.log(makeKey("set", "Age"));

A "setAge"

B "set Age"

C "set-Age"

D Compilation error

💡 Hint

Look at how the template literal joins prefix and prop without spaces.

The template literal concatenates prefix and prop directly, so the output is "setAge".

📝 Syntax

expert

Which option correctly defines a template literal union type for CSS classes?

You want to define a TypeScript type for CSS classes that combine a color and a size with a dash, like "red-small" or "blue-large". Which option correctly defines this type?

A

type Color = "red" | "blue";
type Size = "small" | "large";
type CssClass = `${Color & Size}`;

B

type Color = "red" | "blue";
type Size = "small" | "large";
type CssClass = `${Color | Size}`;

C

type Color = "red" | "blue";
type Size = "small" | "large";
type CssClass = `${Color}-${Size}`;

D

type Color = "red" | "blue";
type Size = "small" | "large";
type CssClass = `${Color}${Size}`;

💡 Hint

Use a template literal with both types separated by a dash.

Option C correctly uses a template literal combining Color and Size with a dash, producing strings like "red-small". Option C uses a union inside the template literal which is valid syntax but produces a union of the strings, not combinations. Option C uses intersection which is invalid here. Option C concatenates without dash.

Practice

1.

Which of the following best describes a template literal with unions in TypeScript?

easy

A. A method to concatenate numbers and strings without type checking.

B. A way to create specific string patterns by combining fixed text and union types.

C. A function that returns a template string without any type restrictions.

D. A way to declare variables without specifying their types.

Solution

1. Step 1: Understand template literals and unions

   Template literals allow embedding expressions in strings. Union types restrict values to a set of options.

2. Step 2: Combine both concepts

   Template literal with unions creates strings with fixed parts and limited variable parts, improving type safety.

3. Final Answer:

   A way to create specific string patterns by combining fixed text and union types. -> Option B

4. Quick Check:

   Template literal + union = specific string patterns [OK]

Hint: Think of fixed text plus limited choices in strings [OK]

Common Mistakes:

• Confusing unions with simple string concatenation
• Ignoring type safety benefits
• Thinking it's only about functions

2.

Which of the following TypeScript declarations correctly uses a template literal with unions?

type Size = "small" | "medium" | "large";
type Message = `Size is ${Size}`;

easy

A. type Message = `Size is ${string}`;

B. type Message = `Size is ${boolean}`;

C. type Message = `Size is ${number}`;

D. type Message = `Size is ${Size}`;

Solution

1. Step 1: Check the union type used inside template literal

   The union type Size is "small" | "medium" | "large" and should be used inside the template literal.

2. Step 2: Match the template literal syntax

   The correct syntax is `Size is ${Size}` to restrict the string to those sizes.

3. Final Answer:

   type Message = `Size is ${Size}`; -> Option D

4. Quick Check:

   Use union type inside template literal exactly [OK]

Hint: Use the union type name inside ${} exactly [OK]

Common Mistakes:

• Replacing union with general types like string or number
• Using incorrect syntax for template literals
• Forgetting backticks around the template

3.

What is the type of result in the following code?

type Color = "red" | "green" | "blue";
type Alert = `Alert: ${Color}`;

const result: Alert = "Alert: green";

medium

A. "Alert: red" | "Alert: green" | "Alert: blue"

B. "Alert: red" | "Alert: green"

C. "Alert: green"

D. string

Solution

1. Step 1: Understand the template literal with union

   The type Alert creates strings by combining "Alert: " with each value in Color.

2. Step 2: Expand the union to all possible strings

   So Alert is the union of "Alert: red", "Alert: green", and "Alert: blue".

3. Final Answer:

   "Alert: red" | "Alert: green" | "Alert: blue" -> Option A

4. Quick Check:

   Template literal expands union to all combined strings [OK]

Hint: Expand union inside template literal to all string combos [OK]

Common Mistakes:

• Assuming only one string value is allowed
• Confusing union with single string
• Using general string type instead of union

4.

Identify the error in this TypeScript code using template literals with unions:

type Status = "success" | "error";
type Message = `Status: ${string}`;

const msg: Message = "Status: success";

medium

A. Using string inside template literal instead of union type Status.

B. Missing backticks around the string value assigned to msg.

C. Incorrect union type declaration for Status.

D. Assigning a string literal to a non-string type.

Solution

1. Step 1: Check the template literal type definition

   The template literal uses ${string} which allows any string, not restricted to Status.

2. Step 2: Identify the correct usage

   It should use ${Status} to restrict values to "success" or "error" only.

3. Final Answer:

   Using string inside template literal instead of union type Status. -> Option A

4. Quick Check:

   Use union type inside template literal for safety [OK]

Hint: Use union type inside ${}, not general string [OK]

Common Mistakes:

• Using string instead of union type inside template
• Ignoring type safety benefits
• Confusing string literals with template literals

5.

Given the following types, which of these assignments is valid without TypeScript errors?

type Direction = "up" | "down";
type Action = "move" | "stop";
type Command = `${Action}-${Direction}`;

const cmd1: Command = "move-up";
const cmd2: Command = "stop-left";
const cmd3: Command = "move-down";
const cmd4: Command = "jump-up";

hard

A. Only cmd2 is valid.

B. All commands are valid.

C. Only cmd1 and cmd3 are valid.

D. Only cmd4 is valid.

Solution

1. Step 1: Understand the Command type

   Command is a template literal combining Action and Direction with a dash, so valid strings are "move-up", "move-down", "stop-up", "stop-down".

2. Step 2: Check each assignment

   cmd1 = "move-up" (valid), cmd2 = "stop-left" (invalid, "left" not in Direction), cmd3 = "move-down" (valid), cmd4 = "jump-up" (invalid, "jump" not in Action).

3. Final Answer:

   Only cmd1 and cmd3 are valid. -> Option C

4. Quick Check:

   Match both parts to union values exactly [OK]

Hint: Check both parts of template literal match union values [OK]

Common Mistakes:

• Assuming any string with dash is valid
• Ignoring union type restrictions
• Confusing Action and Direction values