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.

Practice

1. What does a template literal type in TypeScript do?

easy

A. Defines a function that returns a string.

B. Creates new string types by combining other string types using backticks and ${}.

C. Declares a variable with a fixed string value.

D. Creates a number type from string literals.

Solution

1. Step 1: Understand template literal types

   Template literal types use backticks and ${} to combine string types into new string types.

2. Step 2: Compare options

   Only Creates new string types by combining other string types using backticks and ${}. correctly describes this behavior; others describe unrelated concepts.

3. Final Answer:

   Creates new string types by combining other string types using backticks and ${}. -> Option B

4. Quick Check:

   Template literal types combine strings = A [OK]

Hint: Remember: template literal types build new string types with `${}` [OK]

Common Mistakes:

• Confusing template literal types with string variables
• Thinking template literals create functions
• Assuming they create number types

2. Which of the following is the correct syntax for a template literal type in TypeScript?

easy

A. type Greeting = ${string} world;

B. type Greeting = '${string} world';

C. type Greeting = "${string} world";

D. type Greeting = `${string} world`;

Solution

1. Step 1: Identify correct template literal syntax

   Template literal types use backticks (`) around the string with ${} for type insertion.

2. Step 2: Check each option

   Only `type Greeting = `${string} world`;` uses backticks correctly; the others use single/double quotes or miss backticks.

3. Final Answer:

   type Greeting = `${string} world`; -> Option D

4. Quick Check:

   Backticks + ${} = A [OK]

Hint: Use backticks ``, not quotes, for template literal types [OK]

Common Mistakes:

• Using single or double quotes instead of backticks
• Omitting backticks entirely
• Placing ${} outside backticks

3. Given the code:

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

let greet1: Greeting = "Hello, Alice!";
let greet2: Greeting = "Hello, Charlie!";

Which line causes a TypeScript error?

medium

A. let greet2: Greeting = "Hello, Charlie!";

B. let greet1: Greeting = "Hello, Alice!";

C. Both lines cause errors

D. Neither line causes an error

Solution

1. Step 1: Understand the Greeting type

   Greeting is a template literal type combining "Hello, " with Name ("Alice" or "Bob") and "!".

2. Step 2: Check assigned values

   "Hello, Alice!" matches Greeting, but "Hello, Charlie!" does not because "Charlie" is not in Name.

3. Final Answer:

   let greet2: Greeting = "Hello, Charlie!"; -> Option A

4. Quick Check:

   Invalid string not in union = B [OK]

Hint: Check if inserted string matches union type exactly [OK]

Common Mistakes:

• Assuming any string fits template literal type
• Ignoring union type restrictions
• Confusing variable assignment with type definition

4. Identify the error in this TypeScript code using template literal types:

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

let msg: Message = 404;

medium

A. There is no error; the code is valid.

B. The template literal type syntax is incorrect; it needs backticks.

C. The variable msg cannot be assigned a number if Message includes number.

D. Template literal types cannot be combined with number types using |.

Solution

1. Step 1: Analyze the type Message

   Message is a union of a template literal type `${Status}` (which is "success" or "error") and number.

2. Step 2: Check variable assignment

   Assigning 404 (a number) to msg is valid because Message includes number.

3. Final Answer:

   There is no error; the code is valid. -> Option A

4. Quick Check:

   Union allows number assignment = D [OK]

Hint: Union types allow multiple types including template literals and numbers [OK]

Common Mistakes:

• Thinking template literals can't be unioned with other types
• Assuming syntax error in template literal usage
• Believing number assignment is invalid here

5. How can you create a type that represents all possible CSS margin properties like "margin-top", "margin-right", "margin-bottom", and "margin-left" using template literal types?

hard

A. type MarginProperty = `margin-${string}`;

B. type MarginProperty = "margin-top" | "margin-right" | "margin-bottom" | "margin-left";

C. type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`;

D. type MarginProperty = `margin-${number}`;

Solution

1. Step 1: Understand the goal

   Create a type for specific margin sides using template literal types with a union of side strings.

2. Step 2: Evaluate options

   type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`; uses template literal with union of exact sides, producing only valid margin properties. type MarginProperty = "margin-top" | "margin-right" | "margin-bottom" | "margin-left"; works but is not using template literals. type MarginProperty = `margin-${string}`; allows any string after "margin-", which is too broad. type MarginProperty = `margin-${number}`; uses number, which is invalid here.

3. Final Answer:

   type MarginProperty = `margin-${"top" | "right" | "bottom" | "left"}`; -> Option C

4. Quick Check:

   Template literal + union for sides = C [OK]

Hint: Use union inside ${} to limit template literal options [OK]

Common Mistakes:

• Using string instead of union inside template literal
• Listing all options without template literals
• Using number instead of string union