Pattern matching with template literals in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of pattern matching with template literals

What is the output of this TypeScript code using pattern matching with template literals?

Typescript

const input = "user_123";

const match = input.match(/^user_(\d+)$/);

console.log(match ? `ID: ${match[1]}` : "No match");

A ID: 123

B No match

C ID: user_123

D SyntaxError

💡 Hint

Look at the regular expression and what part is captured.

The regex /^user_(\d+)$/ matches strings starting with 'user_' followed by digits only. The digits are captured and printed as ID.

❓ Predict Output

intermediate

Extracting parts with template literal types

What will be the output of this TypeScript code using template literal types and pattern matching?

Typescript

type EventName = `on${string}Click`;

function handleEvent(event: EventName) {
  if (event.startsWith("on") && event.endsWith("Click")) {
    console.log(`Handled event: ${event}`);
  } else {
    console.log("Unknown event");
  }
}

handleEvent("onButtonClick");

A Handled event: ButtonClick

B Unknown event

C Handled event: onButtonClick

D TypeError

💡 Hint

Check the string passed and the conditions in the function.

The string 'onButtonClick' starts with 'on' and ends with 'Click', so it matches the condition and prints the handled event.

🔧 Debug

advanced

Why does this pattern matching fail?

This TypeScript code tries to extract a version number from a string using template literal types but fails. What is the cause?

Typescript

type VersionString = `v${number}`;

function parseVersion(v: string) {
  if (v.match(/^v\d+$/)) {
    const version: VersionString = v;
    return version;
  }
  return "Invalid version";
}

console.log(parseVersion("v2"));

A Type 'string' is not assignable to type 'VersionString' without assertion

B Regex pattern is incorrect and does not match 'v2'

C Function returns undefined instead of string

D Syntax error in template literal type

💡 Hint

Check the type assignment inside the if block.

Even though the string matches the pattern, TypeScript cannot guarantee the string type matches the template literal type without a type assertion.

📝 Syntax

advanced

Identify the syntax error in template literal pattern matching

Which option contains a syntax error in TypeScript template literal pattern matching?

A type File = `${string}.txt`;

B type Greeting = `Hello, ${string}`;

C type Path = `/home/${string}`;

D type Invalid = `${number`;

💡 Hint

Look carefully at the backticks and braces.

Option D has a missing closing brace '}' after 'number', causing a syntax error.

🚀 Application

expert

Count how many strings match this template literal type

Given the type `type Code = `ERR_${number}_${string}`;` and the array below, how many strings match the `Code` type pattern?

Typescript

type Code = `ERR_${number}_${string}`;

const codes = [
  "ERR_404_NotFound",
  "ERR_500_ServerError",
  "WARN_300_SlowResponse",
  "ERR_abc_Invalid",
  "ERR_123_",
  "ERR_0_ZeroError"
];

A 3

B 4

C 5

D 2

💡 Hint

Check which strings start with 'ERR_', followed by a number, then an underscore and any string.

Strings matching the pattern must start with 'ERR_', then a number, then '_', then any string (including empty). 'ERR_abc_Invalid' fails because 'abc' is not a number. 'WARN_300_SlowResponse' fails prefix. 'ERR_123_' matches because empty string after underscore is allowed.