Exclude type in Typescript - Mini Project: Build & Apply

Using the Exclude Type in TypeScript

📖 Scenario: You are working on a TypeScript project where you have a union type representing different user roles. You want to create a new type that excludes a specific role from this union.

🎯 Goal: Learn how to use the Exclude utility type in TypeScript to remove a specific type from a union type.

📋 What You'll Learn

Create a union type called UserRoles with exact values 'admin', 'editor', and 'viewer'.

Create a new type called NonAdminRoles that excludes the 'admin' role from UserRoles using the Exclude type.

Declare a variable called role of type NonAdminRoles.

Assign the value 'editor' to the variable role.

Print the value of role to the console.

💡 Why This Matters

🌍 Real World

In real projects, you often have union types representing options or roles. Sometimes you need to exclude certain options to create more specific types.

💼 Career

Understanding utility types like <code>Exclude</code> helps you write safer and clearer TypeScript code, which is valuable for frontend and backend development jobs.

1

Create the union type UserRoles

Create a union type called UserRoles with the exact string values 'admin', 'editor', and 'viewer'.

Typescript

// Create the union type UserRoles with 'admin', 'editor', and 'viewer'
type UserRoles = 'admin' | 'editor' | 'viewer';

Need a hint?

Use the pipe symbol | to combine string literals into a union type.

2

Create the type NonAdminRoles excluding 'admin'

Create a new type called NonAdminRoles that uses the Exclude utility type to remove 'admin' from UserRoles.

Typescript

type UserRoles = 'admin' | 'editor' | 'viewer';
// Create NonAdminRoles by excluding 'admin' from UserRoles
type NonAdminRoles = Exclude;

Need a hint?

The Exclude type takes two parameters: the union type and the type to exclude.

3

Declare a variable role of type NonAdminRoles

Declare a variable called role with the type NonAdminRoles.

Typescript

type UserRoles = 'admin' | 'editor' | 'viewer';
type NonAdminRoles = Exclude;
// Declare variable role of type NonAdminRoles
let role: NonAdminRoles;

Need a hint?

Use let to declare the variable with the correct type.

4

Assign and print the value of role

Assign the value 'editor' to the variable role and print it to the console using console.log.

Typescript

type UserRoles = 'admin' | 'editor' | 'viewer';
type NonAdminRoles = Exclude;
let role: NonAdminRoles;
// Assign 'editor' to role and print it
role = 'editor';
console.log(role);

Need a hint?

Use console.log(role) to display the value.