Building type-safe string patterns in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a string literal type for colors.

Typescript

type Color = [1];

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

A"red" | "green" | "blue"

Bnumber

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of specific string literals.

Using number or boolean types instead of string literals.

The type Color is defined as a union of string literals representing specific colors.

2fill in blank

medium

Complete the code to create a type-safe pattern for a URL string starting with 'http'.

Typescript

type HttpUrl = `http${string}`;

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

A"http" | "https"

B"https"

Cstring

D"http"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' alone inside the template literal.

Using a union of strings inside the template literal incorrectly.

The template literal type HttpUrl starts with the string literal "http" followed by any string.

3fill in blank

hard

Fix the error in the type that should match strings ending with '.json'.

Typescript

type JsonFile = `${string}.json`;

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

A"json"

B".txt"

C".json"

D".js"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dot before 'json'.

Using incorrect file extensions.

The type JsonFile matches any string ending with the literal ".json".

4fill in blank

hard

Fill both blanks to define a type-safe pattern for a version string like 'v1.0'.

Typescript

type Version = `${"v"}${string}${"."}${string}`;

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

A"v"

Bnumber

C"."

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' or 'number' literals incorrectly in template literals.

Missing the dot between version numbers.

The Version type starts with "v" followed by a dot "." to form strings like "v1.0".

5fill in blank

hard

Fill all three blanks to create a type-safe pattern for a file path like '/home/user'.

Typescript

type FilePath = `${"/"}${"home"}${"/"}${"user"}`;

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

A"/"

Bstring

C"user"

D"home"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of folder names and slashes.

Using 'string' instead of specific literals.

The FilePath type builds a string starting with "/", then "home", then "/", then "user" to form "/home/user".