Template literal with unions in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a type that combines 'hello' and 'world' with a space.

Typescript

type Greeting = `$[1] ${'world'}`;

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

A'hello'

B'hi'

C'hey'

D'hola'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a string literal.

Forgetting quotes around the string literal.

The template literal type combines the string literal 'hello' with 'world' separated by a space.

2fill in blank

medium

Complete the code to define a type that can be 'red', 'green', or 'blue' using a union.

Typescript

type Color = [1];

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

A'red', 'green', 'blue'

B'red' & 'green' & 'blue'

C'red' | 'green' | 'blue'

D['red', 'green', 'blue']

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of pipes.

Using ampersands which mean intersection, not union.

The union type uses the pipe symbol '|' to combine string literals into one type.

3fill in blank

hard

Fix the error in the template literal type that combines 'cat' or 'dog' with 'food' or 'toy'.

Typescript

type PetItem = `$[1] ${'food' | 'toy'}`;

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

A'cat' & 'dog'

B['cat', 'dog']

C'cat', 'dog'

D'cat' | 'dog'

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' which means intersection, not union.

Using commas or array syntax which are invalid here.

The union operator '|' correctly combines 'cat' and 'dog' as possible string literals.

4fill in blank

hard

Fill both blanks to create a type for 'small', 'medium', or 'large' sizes with 'shirt' or 'pants'.

Typescript

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

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

A'small' | 'medium' | 'large'

B'shirt' | 'pants'

C ' '

D'-'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dash '-' instead of a space.

Putting the clothing union in the first blank.

The first blank is the size union, the second blank is a space string to separate size and clothing type.

5fill in blank

hard

Fill all three blanks to create a type for 'red', 'green', or 'blue' colors combined with 'circle' or 'square' shapes, separated by a dash.

Typescript

type ShapeColor = `$[1]$[2]$[3]`;

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

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

B'-'

C'circle' | 'square'

D'_'

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscore '_' instead of dash '-' as separator.

Mixing up the order of colors and shapes.

The first blank is the color union, the second blank is the dash separator, and the third blank is the shape union.