Template literal type syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a template literal type that combines 'Hello' with a name.

Typescript

type Greeting = `Hello, [1]`;

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

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean instead of string inside the template literal.

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 converted to string.

Typescript

type ID = `ID_[1]`;

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

Aboolean

Bnumber

Cstring

Dsymbol

Attempts:

3 left

💡 Hint

Common Mistakes

Using number directly inside the template literal type without converting to string.

The template literal type requires a string type inside the backticks to concatenate.

3fill in blank

hard

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

Typescript

type Flag = `is[1]`;

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

Aboolean

Bany

Cnumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean or number types inside template literal types.

Template literal types can only combine string types, so 'string' is correct.

4fill in blank

hard

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

Typescript

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

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

AFirstName

Bnumber

CLastName

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean types instead of string types for name parts.

The template literal type combines two string types: FirstName and LastName.

5fill in blank

hard

Fill all three blanks to create a template literal type that formats a date string as 'YYYY-MM-DD'.

Typescript

type DateString = `$[1]-[2]-[3]`;

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

AYear

BMonth

CDay

DHour

Attempts:

3 left

💡 Hint

Common Mistakes

Including non-date parts like Hour or using wrong order in the template literal.

The template literal type combines Year, Month, and Day string types to form a date.