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';

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;

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;

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);

Hint

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

Practice

1. What does the TypeScript Exclude utility type do?

easy

A. Converts a type to a string

B. Adds new types to a union type

C. Removes specific types from a union type

D. Creates a readonly version of a type

Solution

1. Step 1: Understand the purpose of Exclude

   Exclude is designed to remove certain types from a union type.

2. Step 2: Compare with other utility types

   Unlike adding or converting types, Exclude specifically filters out unwanted types.

3. Final Answer:

   Removes specific types from a union type -> Option C

4. Quick Check:

   Exclude = Remove types [OK]

Hint: Exclude filters out unwanted types from unions [OK]

Common Mistakes:

• Thinking it adds types instead of removing
• Confusing with Partial or Readonly utility types
• Assuming it converts types to strings

2. Which of the following is the correct syntax to exclude type 'b' from the union 'a' | 'b' | 'c'?

easy

A. type Result = Exclude<'a' | 'b' | 'c', ['b']>;

B. type Result = Exclude<'a' | 'b' | 'c', 'b'>;

C. type Result = Exclude<'a' | 'b' | 'c'>;

D. type Result = Exclude<'a' | 'b' | 'c', 'd'>;

Solution

1. Step 1: Check the syntax of Exclude

   The correct syntax is Exclude<UnionType, ExcludedType>.

2. Step 2: Match the correct exclusion

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; correctly excludes 'b' from the union 'a' | 'b' | 'c'.

3. Final Answer:

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; -> Option B

4. Quick Check:

   Exclude syntax = Exclude<Union, TypeToRemove> [OK]

Hint: Use Exclude syntax [OK]

Common Mistakes:

• Using array syntax for second parameter
• Omitting the second parameter
• Excluding a type not in the union

3. What is the resulting type of this code?

type Letters = 'x' | 'y' | 'z';
type Result = Exclude;

medium

A. 'x'

B. 'x' | 'y' | 'z'

C. 'y' | 'z'

D. never

Solution

1. Step 1: Identify the original union type

   Letters is 'x' | 'y' | 'z'.

2. Step 2: Apply Exclude to remove 'y' and 'z'

   Removing 'y' and 'z' leaves only 'x'.

3. Final Answer:

   'x' -> Option A

4. Quick Check:

   Exclude removes 'y' and 'z', leaving 'x' [OK]

Hint: Exclude removes all listed types from the union [OK]

Common Mistakes:

• Thinking it keeps excluded types
• Confusing with intersection types
• Assuming result is never when some types remain

4. Identify the error in this TypeScript code:

type Colors = 'red' | 'green' | 'blue';
type NoGreen = Exclude<Colors>;

medium

A. Missing second parameter in Exclude

B. Colors is not a union type

C. Exclude cannot be used with string literals

D. No error, code is correct

Solution

1. Step 1: Check the Exclude syntax

   Exclude requires two parameters: the union type and the type(s) to exclude.

2. Step 2: Identify the missing parameter

   The code only provides one parameter, missing the second one to exclude.

3. Final Answer:

   Missing second parameter in Exclude -> Option A

4. Quick Check:

   Exclude needs two types: Union and Excluded [OK]

Hint: Exclude always needs two type parameters [OK]

Common Mistakes:

• Forgetting the second parameter
• Assuming Exclude works with one argument
• Confusing Exclude with other utility types

5. Given this code, what is the type of Filtered?

type Status = 'success' | 'error' | 'pending' | 'cancelled';
type Filtered = Exclude;

hard

A. 'error' | 'cancelled' | 'unknown'

B. 'success' | 'pending' | 'unknown'

C. never

D. 'success' | 'pending'

Solution

1. Step 1: Identify the original union and excluded types

   Status is 'success' | 'error' | 'pending' | 'cancelled'. We exclude 'error', 'cancelled', and 'unknown'.

2. Step 2: Remove excluded types from the union

   'error' and 'cancelled' are removed. 'unknown' is not in Status, so it has no effect.

3. Final Answer:

   'success' | 'pending' -> Option D

4. Quick Check:

   Exclude removes only matching types from union [OK]

Hint: Exclude only removes types present in the union [OK]

Common Mistakes:

• Including excluded types in the result
• Adding excluded types not in the union
• Assuming result is never if unknown type excluded