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.