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".

Practice

1. What is the main benefit of using type-safe string patterns in TypeScript?

easy

A. They ensure strings follow a specific format at compile time.

B. They make strings run faster at runtime.

C. They automatically convert strings to numbers.

D. They allow strings to be used as arrays.

Solution

1. Step 1: Understand type-safe string patterns

   Type-safe string patterns use TypeScript's template literal types to enforce string formats during coding.

2. Step 2: Identify the benefit

   This enforcement helps catch errors early by ensuring strings match expected patterns before running the program.

3. Final Answer:

   They ensure strings follow a specific format at compile time. -> Option A

4. Quick Check:

   Type-safe string patterns = compile-time format check [OK]

Hint: Type-safe patterns check string format before running code [OK]

Common Mistakes:

• Thinking they improve runtime speed
• Confusing with string-to-number conversion
• Assuming they change string behavior at runtime

2. Which of the following is the correct syntax to define a type-safe string pattern for a URL starting with "https://" in TypeScript?

easy

A. type URL = 'https://' & string;

B. type URL = "https://" + string;

C. type URL = string | 'https://';

D. type URL = `https://${string}`;

Solution

1. Step 1: Recognize template literal type syntax

   Type-safe string patterns use backticks and ${} placeholders, like `https://${string}`.

2. Step 2: Compare options

   type URL = `https://${string}`; uses correct template literal syntax. Options A, B, and D use invalid or incorrect TypeScript syntax for this purpose.

3. Final Answer:

   type URL = `https://${string}`; -> Option D

4. Quick Check:

   Template literal type syntax = backticks + ${} [OK]

Hint: Use backticks and ${} for template literal types [OK]

Common Mistakes:

• Using quotes with + for concatenation in types
• Using & or | operators incorrectly
• Not using backticks for template literals

3. Given the type definition type ID = `user_${number}`;, which of the following assignments will cause a TypeScript error?

medium

A. const a: ID = 'user_123';

B. const d: ID = 'user_0';

C. const b: ID = 'user_abc';

D. const c: ID = `user_${456}`;

Solution

1. Step 1: Understand the pattern

   The type ID requires strings starting with 'user_' followed by a number.

2. Step 2: Check each assignment

   A is 'user_123' (valid number), B is 'user_0' (valid number), C uses template literal with number 456 (valid), D is 'user_abc' (letters, invalid).

3. Final Answer:

   const b: ID = 'user_abc'; causes error -> Option C

4. Quick Check:

   Pattern requires number after 'user_' = D error [OK]

Hint: Check if string part after prefix matches number type [OK]

Common Mistakes:

• Assuming any string after prefix is valid
• Confusing template literal with runtime string
• Ignoring number type constraint

4. Identify the error in this TypeScript code snippet:

type Email = `${string}@${string}.com`;
const myEmail: Email = 'john.doe@gmail';

medium

A. The variable myEmail should be a number, not a string.

B. The type Email does not allow missing '.com' suffix.

C. The template literal syntax is incorrect.

D. The '@' symbol is not allowed in template literal types.

Solution

1. Step 1: Analyze the type Email pattern

   Email requires a string, then '@', then another string, then '.com' exactly.

2. Step 2: Check the assigned value

   myEmail is 'john.doe@gmail' missing the '.com' suffix, so it does not match the pattern.

3. Final Answer:

   The type Email does not allow missing '.com' suffix. -> Option B

4. Quick Check:

   Pattern requires '.com' suffix = missing causes error [OK]

Hint: Match full pattern including suffix exactly [OK]

Common Mistakes:

• Ignoring required suffix in pattern
• Thinking '@' is invalid in template literals
• Confusing type errors with runtime errors

5. You want to create a type-safe pattern for a version string like v1.2.3 where each number can be one or more digits. Which of these TypeScript types correctly enforces this pattern?

hard

A. type Version = `v${number}.${number}.${number}`;

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

C. type Version = `v${number}.${string}.${number}`;

D. type Version = `v${number}.${number}`;

Solution

1. Step 1: Understand the version pattern

   The version string starts with 'v' followed by three numbers separated by dots.

2. Step 2: Evaluate each type

   A uses number for all three parts, matching the pattern exactly. B uses string, allowing invalid formats. C mixes number and string incorrectly. D misses the third number part.

3. Final Answer:

   type Version = `v${number}.${number}.${number}`; -> Option A

4. Quick Check:

   All parts as number with dots = type Version = `v${number}.${number}.${number}`; [OK]

Hint: Use ${number} for numeric parts in template literals [OK]

Common Mistakes:

• Using string instead of number for numeric parts
• Missing parts of the pattern
• Mixing types inconsistently