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.