Pattern matching with template literals in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to match a string starting with 'Hello' using template literals.

Typescript

const greeting = 'Hello, world!';
const match = greeting.[1](/^Hello/);
console.log(match);

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

Aincludes

BstartsWith

Ctest

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using startsWith instead of match will not work with template literals.

includes only checks for substring presence, not pattern matching.

The match method is used to find matches based on patterns, including template literals with embedded expressions.

2fill in blank

medium

Complete the code to extract the name from a greeting using pattern matching with template literals.

Typescript

const greeting = 'Hello, Alice!';
const pattern = `^Hello, (.+)!$`;
const result = greeting.match(new RegExp(pattern));
const name = result.[1](1);
console.log(name);

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

Aget

Bat

Cslice

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using index or get will cause errors because they are not array methods.

Using slice returns a subarray, not a single string.

The at(1) method accesses the first captured group from the match result array.

3fill in blank

hard

Fix the error in the code to correctly test if a string matches a pattern using template literals.

Typescript

const input = 'user123';
const pattern = new RegExp(`^user\\d+$`);
const isMatch = pattern.[1](input);
console.log(isMatch);

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

Atest

Bsearch

Cincludes

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using match returns an array, not a boolean.

includes and search are not methods of RegExp.

The test method of a RegExp returns true or false if the string matches the pattern.

4fill in blank

hard

Fill both blanks to create a function that extracts the domain from an email using pattern matching with template literals.

Typescript

function getDomain(email: string) {
  const regex = new RegExp(`@(.+)[1]`);
  const match = email.match(regex);
  return match.[2](1) || null;
}

console.log(getDomain('[e-mail]'));

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

A$

Bat

C[0]

D^

Attempts:

3 left

💡 Hint

Common Mistakes

Using '^' instead of '$' will match the start, not the end.

Using [0] returns the full match, not the captured group.

The regex uses $ to match the end of the string. The at(1) method accesses the first captured group which is the domain.

5fill in blank

hard

Fill all three blanks to create a function that validates and extracts year, month, and day from a date string using template literal pattern matching.

Typescript

function parseDate(dateStr: string) {
  const regex = new RegExp(`^(\d{ [1] })-(\d{ [2] })-(\d{ [3] })$`);
  const match = dateStr.match(regex);
  if (!match) return null;
  return {
    year: match.at(1),
    month: match.at(2),
    day: match.at(3)
  };
}

console.log(parseDate('2023-06-15'));

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

A4

B2

C3

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong digit counts will cause the regex not to match valid dates.

Mixing up the order of year, month, day in the regex.

The year has 4 digits, month and day have 2 digits each. The regex captures these groups accordingly.

Practice

1. What does pattern matching with template literals in TypeScript primarily help you do?

easy

A. Create new variables dynamically

B. Automatically generate functions from strings

C. Change the type of a variable at runtime

D. Check if a string fits a specific shape or format

Solution

1. Step 1: Understand the purpose of pattern matching

   Pattern matching with template literals is used to verify if strings follow a certain pattern or format.

2. Step 2: Relate to template literals usage

   Template literals allow embedding expressions and patterns to check string shapes easily.

3. Final Answer:

   Check if a string fits a specific shape or format -> Option D

4. Quick Check:

   Pattern matching = Check string shape [OK]

Hint: Pattern matching checks string shapes, not variable types [OK]

Common Mistakes:

• Confusing pattern matching with variable creation
• Thinking it changes variable types
• Assuming it generates functions automatically

2. Which of the following is the correct syntax to use a template literal pattern in a TypeScript type check?

easy

A. type ID = `${string}-${number}`;

B. type ID = '${string}-${number}';

C. ;`}rebmun{$-}gnirts{$` = DI epyt

D. type ID = `${string}-${number}`

Solution

1. Step 1: Identify correct template literal syntax

   Template literals use backticks (`) and embed types inside ${} without quotes.

2. Step 2: Check for correct punctuation

   type ID = `${string}-${number}`; correctly uses backticks and ${} with no extra quotes.

3. Final Answer:

   type ID = `${string}-${number}`; -> Option A

4. Quick Check:

   Backticks + ${} = correct syntax [OK]

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

Common Mistakes:

• Using single or double quotes instead of backticks
• Putting quotes inside ${} expressions
• Missing backticks around the pattern

3. What will be the result of this TypeScript code snippet?

type Email = `${string}@${string}.com`;

function isEmail(value: string): value is Email {
  return /.+@.+\.com$/.test(value);
}

console.log(isEmail('[e-mail]'));
console.log(isEmail('[e-mail]'));

medium

A. true\ntrue

B. false\ntrue

C. true\nfalse

D. false\nfalse

Solution

1. Step 1: Understand the Email type pattern

   The Email type expects strings like '[e-mail]'.

2. Step 2: Analyze the isEmail function

   The regex checks if the string ends with '.com' after an '@' symbol.

3. Step 3: Check the console.log outputs

   '[e-mail]' matches the regex, so true; '[e-mail]' does not, so false.

4. Final Answer:

   true false -> Option C

5. Quick Check:

   Regex matches .com only = true, false [OK]

Hint: Regex matches only .com emails, others return false [OK]

Common Mistakes:

• Assuming .org matches .com pattern
• Ignoring regex anchors
• Confusing true/false order in output

4. Identify the error in this TypeScript code using template literal pattern matching:

type Phone = `${number}-${number}-${number}`;

function isPhone(value: string): value is Phone {
  return /^\d{3}-\d{3}-\d{4}$/.test(value);
}

medium

A. The Phone type pattern does not match the regex format

B. The regex pattern is missing anchors

C. Template literals cannot use number types inside ${}

D. The function should return a boolean, not a type predicate

Solution

1. Step 1: Compare Phone type and regex pattern

   Phone type expects three numbers separated by dashes, but each ${number} matches any number, not fixed digits.

2. Step 2: Check regex pattern details

   The regex expects exactly 3 digits, then 3 digits, then 4 digits, which doesn't align with the Phone type's generic number placeholders.

3. Final Answer:

   The Phone type pattern does not match the regex format -> Option A

4. Quick Check:

   Type pattern and regex must align [OK]

Hint: Match template literal types exactly with regex patterns [OK]

Common Mistakes:

• Assuming ${number} matches fixed digit counts
• Ignoring regex anchors (though present here)
• Confusing return type of type predicate functions

5. Given this TypeScript code, what will be the output?

type UserID = `user_${number}`;

function parseUserID(id: string): UserID | null {
  if (id.match(/^user_\d+$/)) {
    return id as UserID;
  }
  return null;
}

console.log(parseUserID('user_123'));
console.log(parseUserID('admin_123'));

hard

A. null\nnull

B. 'user_123'\nnull

C. 'user_123'\n'user_123'

D. null\n'user_123'

Solution

1. Step 1: Understand UserID type pattern

   UserID must start with 'user_' followed by a number.

2. Step 2: Analyze parseUserID function

   The function returns the id cast as UserID if it matches the regex /^user_\d+$/, else returns null.

3. Step 3: Evaluate console.log outputs

   'user_123' matches regex, so returns 'user_123'; 'admin_123' does not, so returns null.

4. Final Answer:

   'user_123' null -> Option B

5. Quick Check:

   Regex match returns id, else null [OK]

Hint: Regex match controls return; unmatched returns null [OK]

Common Mistakes:

• Assuming 'admin_123' matches user pattern
• Confusing return types with casting
• Ignoring regex anchors and pattern