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

Need a 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

Need a 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

Need a 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

Need a hint?

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