Pattern matching with template literals in Typescript

Introduction

Pattern matching with template literals helps you check if a string fits a certain shape or pattern easily. It makes working with strings clearer and simpler.

You want to check if a string starts with a specific word followed by some numbers.

You need to extract parts of a string that follow a known format.

You want to compare strings that have a fixed pattern but variable parts.

You want to write cleaner code instead of using complex regular expressions.

You want to handle strings with placeholders or templates in a readable way.

Syntax

Typescript

function matchPattern(input: string) {
  const prefix = 'prefix';
  if (input.match(new RegExp(`^${prefix}\d+$`))) {
    // code when pattern matches
  }
}

// Or using template literal types for compile-time checks
type Greeting = `hello${string}`;
const greeting: Greeting = 'hello123';
if (greeting.startsWith('hello')) {
  // matched (runtime check)
}

Template literals use backticks (`) and can embed expressions with ${}.

TypeScript 4.1+ supports template literal types for compile-time string pattern checks.

Examples

Check if string starts with 'hello' using template literal.

Typescript

const greeting = 'hello123';
if (greeting.startsWith(`hello`)) {
  console.log('Pattern matched!');
}

Match string starting with 'user' followed by digits using regex (template literals help build patterns).

Typescript

const input = 'user42';
if (input.match(/^user\d+$/)) {
  console.log('User pattern matched');
}

Use TypeScript template literal types to enforce string pattern at compile time.

Typescript

type ID = `item-${number}`;
const id: ID = 'item-123';
console.log(id);

Edge case: empty string does not match pattern.

Typescript

const empty = '';
if (empty.startsWith(`hello`)) {
  console.log('Won\'t print');
} else {
  console.log('No match for empty string');
}

Sample Program

This program checks if strings match the pattern 'user' followed by numbers using a regular expression. Template literals help build readable messages.

Typescript

function checkUserID(userID: string) {
  // Check if userID matches pattern 'user' followed by digits
  if (/^user\d+$/.test(userID)) {
    console.log(`User ID '${userID}' matches the pattern.`);
  } else {
    console.log(`User ID '${userID}' does NOT match the pattern.`);
  }
}

console.log('Before checking IDs:');
checkUserID('user123');
checkUserID('admin456');
checkUserID('user');
checkUserID('user007');

Important Notes

Time complexity of pattern matching with regex is generally O(n), where n is string length.

Space complexity is O(1) for simple matches, but can grow with complex patterns.

Common mistake: confusing template literals with regular expressions; template literals create strings, regex tests patterns.

Use pattern matching with template literals for simple, readable checks; use regex for complex patterns.

Summary

Pattern matching with template literals helps check string shapes simply.

Use template literals to build readable string patterns and messages.

Combine with regex for powerful pattern checks in TypeScript.

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