Template literal type syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Template Literal Type Concatenation

What is the type of variable result after this code runs?

Typescript

type Greeting = "Hello";
type Name = "Alice" | "Bob";
type Result = `${Greeting}, ${Name}!`;

let result: Result;
result = "Hello, Alice!";

A "Hello, Alice!"

B "Hello, Alice!" | "Hello, Bob!"

C "Hello, Alice!" | "Hello, Bob!" | "Hello, Charlie!"

D string

💡 Hint

Think about how template literal types combine unions.

The template literal type combines the union of Name with the fixed Greeting string, producing a union of all possible combinations.

❓ Predict Output

intermediate

Result of Nested Template Literal Types

What is the type of fullId after this code?

Typescript

type Prefix = "ID" | "UID";
type NumberStr = `${number}`;
type FullId = `${Prefix}-${NumberStr}`;

let fullId: FullId;
fullId = "UID-123";

A `${"ID" | "UID"}-${string}`

B "ID-123" | "UID-123"

C string

D "ID-" | "UID-"

💡 Hint

Remember that `${number}` becomes string but is still a template literal type.

The type FullId is a template literal combining Prefix union and a string representation of a number, so it is `${"ID" | "UID"}-${string}`.

🔧 Debug

advanced

Identify the Error in Template Literal Type Usage

What error does this TypeScript code produce?

Typescript

type Color = "red" | "blue";
type Shade = "light" | "dark";
type ColoredShade = `${Shade} ${Color}`;

let paint: ColoredShade = "bright red";

A Type '"bright red"' is not assignable to type 'ColoredShade'.

B SyntaxError: Unexpected token in template literal type.

C TypeError: Cannot use union types in template literals.

D No error, code compiles successfully.

💡 Hint

Check if the assigned string matches the template literal type exactly.

The string "bright red" is not part of the union generated by `${Shade} ${Color}`, which only includes "light red", "light blue", "dark red", and "dark blue".

🧠 Conceptual

advanced

Understanding Template Literal Type Distributive Behavior

Given type A = "x" | "y" and type B = `${A}1`, what is the expanded type of B?

A "x" | "y" | "1"

B "x1"

C "x1" | "y1"

D string

💡 Hint

Template literal types distribute over unions.

The template literal type applies to each member of the union separately, producing "x1" and "y1" as the union members.

❓ Predict Output

expert

Complex Template Literal Type with Conditional Types

What is the type of Result after this code?

Typescript

type Status = "success" | "error";
type Message<T extends Status> = T extends "success" ? `Operation was ${T}` : `Operation failed with ${T}`;
type Result = Message<Status>;

A string

B "Operation was success"

C "Operation failed with error"

D "Operation was success" | "Operation failed with error"

💡 Hint

Conditional types distribute over unions.

The conditional type applies to each member of Status, producing a union of the two template literal strings.