Why template literal types are powerful in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a template literal type that combines 'Hello' and a name.

Typescript

type Greeting = `Hello, [1]!`;

Drag options to blanks, or click blank then click option'

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean instead of string for the name.

The template literal type expects a string to combine with 'Hello,'.

2fill in blank

medium

Complete the code to create a type that prefixes 'ID_' to a number type.

Typescript

type PrefixedID = `ID_[1]`;

Drag options to blanks, or click blank then click option'

Aboolean

Bnumber

Cstring

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number when the goal is to prefix a number.

The template literal type can convert a number to a string by embedding it in the template.

3fill in blank

hard

Fix the error in the template literal type that tries to combine a boolean with a string.

Typescript

type StatusMessage = `Status: [1]`;

Drag options to blanks, or click blank then click option'

Astring

Bboolean

Cnumber

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use boolean directly in template literal types.

Template literal types require string-compatible types; boolean is not allowed directly.

4fill in blank

hard

Fill both blanks to create a type that combines a prefix and a suffix with a string.

Typescript

type FullName = `[1]$[2]`;

Drag options to blanks, or click blank then click option'

AFirstName

BLastName

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or string instead of name parts.

The template literal combines two string types representing first and last names.

5fill in blank

hard

Fill all three blanks to create a type that formats a URL with protocol, domain, and path.

Typescript

type URL = `[1]://$[2]/[3]`;

Drag options to blanks, or click blank then click option'

AProtocol

BDomain

CPath

DPort

Attempts:

3 left

💡 Hint

Common Mistakes

Using Port instead of Path or mixing parts incorrectly.

This template literal type builds a URL string from protocol, domain, and path parts.

Practice

1. What is the main benefit of using template literal types in TypeScript?

easy

A. They allow creating new string types by combining existing ones.

B. They execute string concatenation at runtime.

C. They replace all string types with numbers.

D. They disable type checking for strings.

Solution

1. Step 1: Understand template literal types purpose

   Template literal types combine string types to form new string types at compile time.

2. Step 2: Compare options with this purpose

   Only They allow creating new string types by combining existing ones. correctly describes this benefit; others describe runtime behavior or incorrect features.

3. Final Answer:

   They allow creating new string types by combining existing ones. -> Option A

4. Quick Check:

   Template literal types build new string types = A [OK]

Hint: Remember: template literal types create new string types, not runtime strings [OK]

Common Mistakes:

• Confusing template literal types with runtime string concatenation
• Thinking they disable type checking
• Assuming they convert strings to numbers

2. Which of the following is the correct syntax to define a template literal type combining 'hello' and a variable T?

easy

A. type Greet = hello${T};

B. type Greet = `hello + ${T}`;

C. type Greet = 'hello' + T;

D. type Greet = `hello${T}`;

Solution

1. Step 1: Recall template literal type syntax

   Template literal types use backticks with placeholders like ${T} inside, no plus signs.

2. Step 2: Check each option's syntax

   type Greet = `hello${T}`; correctly uses backticks and ${T} without extra symbols; others have syntax errors.

3. Final Answer:

   type Greet = `hello${T}`; -> Option D

4. Quick Check:

   Correct template literal syntax uses backticks and ${} = A [OK]

Hint: Use backticks and ${} for variables inside template literal types [OK]

Common Mistakes:

• Using plus signs inside template literal types
• Omitting backticks
• Not wrapping variable in ${}

3. What is the resulting type of this TypeScript code?

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

medium

A. `Hello!`

B. `Hello, Name!`

C. `Hello, Alice!` | `Hello, Bob!`

D. `Hello, ${Name}!`

Solution

1. Step 1: Understand union substitution in template literal types

   The union 'Alice' | 'Bob' substitutes into the template, creating a union of strings.

2. Step 2: Form the combined type

   Resulting type is `Hello, Alice!` | `Hello, Bob!`, combining each union member with the template.

3. Final Answer:

   `Hello, Alice!` | `Hello, Bob!` -> Option C

4. Quick Check:

   Union expands inside template literals = D [OK]

Hint: Union types inside template literals create unions of all combinations [OK]

Common Mistakes:

• Thinking the union stays as a single string with ${Name}
• Ignoring union expansion
• Confusing template literal type with runtime string

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

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

const msg: Message = 'Status: fail';

medium

A. Template literal types cannot use unions.

B. Assigning 'Status: fail' is invalid because 'fail' is not in Status union.

C. Backticks are missing around the string assignment.

D. The variable msg should be a number, not a string.

Solution

1. Step 1: Check allowed values for Message type

   Message type expands to 'Status: success' | 'Status: error' only.

2. Step 2: Validate assigned value

   Assigned string 'Status: fail' is not part of the allowed union, causing a type error.

3. Final Answer:

   Assigning 'Status: fail' is invalid because 'fail' is not in Status union. -> Option B

4. Quick Check:

   Assigned string must match template literal union = B [OK]

Hint: Check if assigned string matches all union members in template literal type [OK]

Common Mistakes:

• Assuming any string fits template literal type
• Thinking unions can't be used in template literals
• Ignoring type mismatch errors

5. Given these types:

type Event = 'click' | 'hover';
type Element = 'button' | 'link';
type EventName = `${Element}_${Event}`;

Which of the following is NOT assignable to a variable of type EventName?

hard

A. 'button_focus'

B. 'link_hover'

C. 'button_click'

D. 'link_click'

Solution

1. Step 1: Understand EventName type combinations

   EventName combines Element and Event with underscore, so valid values are 'button_click', 'button_hover', 'link_click', 'link_hover'.

2. Step 2: Identify invalid assignment

   'button_focus' is invalid because 'focus' is not in Event union.

3. Final Answer:

   'button_focus' -> Option A

4. Quick Check:

   Only combinations of Element and Event are valid = C [OK]

Hint: Check if both parts of template literal are in their unions [OK]

Common Mistakes:

• Assuming any string with underscore is valid
• Ignoring union members in template literal types
• Confusing runtime strings with type literals