Why template literal types are powerful in Typescript - See It in Action

Why template literal types are powerful

📖 Scenario: Imagine you are building a system that manages user roles and permissions. You want to create specific permission strings by combining roles and actions in a clear and safe way.

🎯 Goal: You will build a TypeScript program that uses template literal types to create combined permission strings from roles and actions. This will help you see how template literal types can make your code safer and easier to manage.

📋 What You'll Learn

Create two string literal types called Role and Action with exact values

Create a template literal type called Permission that combines Role and Action

Create a variable called userPermission with a value that matches the Permission type

Print the value of userPermission

💡 Why This Matters

🌍 Real World

Many apps use roles and permissions to control what users can do. Template literal types help keep these permission strings correct and easy to manage.

💼 Career

Understanding template literal types is useful for writing safer TypeScript code, especially in projects with complex string patterns like APIs, permissions, and configuration keys.

1

Create Role and Action types

Create a string literal type called Role with values 'admin' and 'user'. Also create a string literal type called Action with values 'read' and 'write'.

Typescript

// Your code here

Need a hint?

Use the type keyword and the pipe | symbol to list possible string values.

2

Create Permission template literal type

Create a template literal type called Permission that combines Role and Action with a colon ':' between them, like 'admin:read'.

Typescript

type Role = 'admin' | 'user';
type Action = 'read' | 'write';
// Your code here

Need a hint?

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

3

Create a variable with Permission type

Create a variable called userPermission of type Permission and assign it the value 'admin:write'.

Typescript

type Role = 'admin' | 'user';
type Action = 'read' | 'write';
type Permission = `${Role}:${Action}`;
// Your code here

Need a hint?

Use const and specify the type after the variable name with a colon.

4

Print the userPermission value

Write a console.log statement to print the value of userPermission.

Typescript

type Role = 'admin' | 'user';
type Action = 'read' | 'write';
type Permission = `${Role}:${Action}`;

const userPermission: Permission = 'admin:write';
// Your code here

Need a hint?

Use console.log(userPermission); to show the value in the console.