Template literal types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a template literal type that combines 'hello' and a string.

Typescript

type Greeting = `hello [1]`;

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

Astring

Bnumber

Cboolean

Dworld

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'world' limits the type to only 'helloworld'.

Using 'number' or 'boolean' causes type errors.

The template literal type uses string to allow any string after 'hello'.

2fill in blank

medium

Complete the code to create a template literal type that prefixes 'id_' to a number.

Typescript

type ID = `id_[1]`;

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

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' allows any string, not just numbers.

Using 'boolean' or 'any' is not specific enough.

The template literal type uses number to allow numeric suffixes after 'id_'.

3fill in blank

hard

Fix the error in the template literal type that combines 'user_' with a union of 'admin' or 'guest'.

Typescript

type UserRole = `user_[1]`;

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

Aadmin | guest

B'admin' | 'guest'

C"admin" | "guest"

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes causes syntax errors.

Using plain identifiers without quotes is invalid.

Template literal types require string literal types inside, so quotes are needed around 'admin' and 'guest'.

4fill in blank

hard

Fill both blanks to create a template literal type that combines a color and a size with a dash between.

Typescript

type Product = `$[1]-[2]`;

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

A'red' | 'blue' | 'green'

B'small' | 'medium' | 'large'

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or 'number' allows any value, not specific ones.

Mixing up the order of color and size.

The first blank is a union of color strings, the second blank is a union of size strings, combined with a dash.

5fill in blank

hard

Fill all three blanks to create a template literal type for event names with prefix, action, and suffix.

Typescript

type EventName = `$[1]_$[2]_$[3]`;

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

A'click' | 'hover' | 'scroll'

B'start' | 'end' | 'move'

C'button' | 'link' | 'image'

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using unions in the wrong order.

Not using underscores between parts.

The prefix is any string, followed by an action from the first union, then a suffix from the second union, all joined by underscores.