Building type-safe string patterns in Typescript - Mini Project: Build & Apply

Building type-safe string patterns

📖 Scenario: Imagine you are creating a system that uses specific string patterns to identify user roles and actions in your app. You want to make sure these strings follow strict rules so mistakes are caught early by TypeScript.

🎯 Goal: Build a type-safe string pattern system using TypeScript template literal types. You will create base string unions, combine them into patterns, and then use these patterns to type-check variables.

📋 What You'll Learn

Create string literal union types for user roles and actions

Create a template literal type combining roles and actions with a separator

Declare variables using the combined pattern type

Print the variables to verify correct values

💡 Why This Matters

🌍 Real World

Many apps use string patterns to represent permissions, routes, or commands. Using type-safe patterns helps catch errors early and improves code reliability.

💼 Career

Understanding TypeScript template literal types is valuable for frontend and backend developers working with complex string-based APIs or permission systems.

1

Define base string literal union types

Create two string literal union types called Role and Action. Role should be exactly 'admin', 'user', and 'guest'. Action should be exactly 'create', 'read', 'update', and 'delete'.

Typescript

// Your code here

Hint

Use the type keyword and the pipe | symbol to create union types.

2

Create a template literal type combining roles and actions

Create a new type called RoleAction that combines Role and Action using a template literal type. The format should be <Role>:<Action> (for example, 'admin:create').

Typescript

type Role = 'admin' | 'user' | 'guest';
type Action = 'create' | 'read' | 'update' | 'delete';
// Your code here

Hint

Use backticks ` and ${} to create template literal types.

3

Declare variables using the combined pattern type

Declare two variables: permission1 and permission2. Set permission1 to 'admin:create' and permission2 to 'user:read'. Both variables must have the type RoleAction.

Typescript

type Role = 'admin' | 'user' | 'guest';
type Action = 'create' | 'read' | 'update' | 'delete';
type RoleAction = `${Role}:${Action}`;
// Your code here

Hint

Use const and specify the type with : after the variable name.

4

Print the variables to verify correct values

Write two console.log statements to print permission1 and permission2.

Typescript

type Role = 'admin' | 'user' | 'guest';
type Action = 'create' | 'read' | 'update' | 'delete';
type RoleAction = `${Role}:${Action}`;

const permission1: RoleAction = 'admin:create';
const permission2: RoleAction = 'user:read';
// Your code here

Hint

Use console.log(variableName) to print values to the console.

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