Heterogeneous enums in Typescript - Mini Project: Build & Apply

Heterogeneous enums

📖 Scenario: You are creating a simple program to represent different types of user roles in a system. Some roles are identified by numbers, and others by strings. This mix is called a heterogeneous enum.

🎯 Goal: Build a TypeScript heterogeneous enum called UserRole with both numeric and string values, then print one of the roles.

📋 What You'll Learn

Create a heterogeneous enum called UserRole

Include numeric and string values in the enum

Print the value of UserRole.Admin

💡 Why This Matters

🌍 Real World

Heterogeneous enums are useful when you need to represent a set of related constants that have different types, like numeric IDs and string codes, in a clear and organized way.

💼 Career

Understanding enums helps in writing clean, maintainable code in TypeScript, which is widely used in web development and many software projects.

1

Create the heterogeneous enum

Create a heterogeneous enum called UserRole with these exact entries: Admin = 1, Editor = 'EDITOR', Viewer = 3, Guest = 'GUEST'.

Typescript

// Your code here

Hint

Use the enum keyword and assign numbers or strings to each member.

2

Add a variable to hold a role

Create a variable called currentRole and set it to UserRole.Admin.

Typescript

enum UserRole {
    Admin = 1,
    Editor = 'EDITOR',
    Viewer = 3,
    Guest = 'GUEST'
}

// Your code here

Hint

Use let currentRole = UserRole.Admin; to assign the enum value.

3

Write a function to describe the role

Create a function called describeRole that takes a parameter role of type UserRole and returns a string. Inside, use a switch statement on role with cases for UserRole.Admin, UserRole.Editor, UserRole.Viewer, and UserRole.Guest. Return these exact strings respectively: 'Administrator', 'Content Editor', 'Content Viewer', 'Guest User'. Include a default case returning 'Unknown Role'. Assign the result of describeRole(currentRole) to a variable called roleDescription.

Typescript

enum UserRole {
    Admin = 1,
    Editor = 'EDITOR',
    Viewer = 3,
    Guest = 'GUEST'
}

let currentRole = UserRole.Admin;

// Your code here

Hint

Use a switch statement to return the correct string for each role.

4

Print the role description

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

Typescript

enum UserRole {
    Admin = 1,
    Editor = 'EDITOR',
    Viewer = 3,
    Guest = 'GUEST'
}

let currentRole = UserRole.Admin;

function describeRole(role: UserRole): string {
    switch (role) {
        case UserRole.Admin:
            return 'Administrator';
        case UserRole.Editor:
            return 'Content Editor';
        case UserRole.Viewer:
            return 'Content Viewer';
        case UserRole.Guest:
            return 'Guest User';
        default:
            return 'Unknown Role';
    }
}

let roleDescription = describeRole(currentRole);

// Your code here

Hint

Use console.log(roleDescription); to print the role description.

Practice

1.

What is a heterogeneous enum in TypeScript?

easy

A. An enum that contains both string and numeric values.

B. An enum that only contains numeric values.

C. An enum that only contains string values.

D. An enum that cannot be used with functions.

Solution

1. Step 1: Understand enum value types

   Enums in TypeScript can hold numeric or string values.

2. Step 2: Define heterogeneous enum

   A heterogeneous enum mixes both string and numeric values in the same enum.

3. Final Answer:

   An enum that contains both string and numeric values. -> Option A

4. Quick Check:

   Heterogeneous enum = mixed string and number values [OK]

Hint: Remember: mixed types in one enum means heterogeneous [OK]

Common Mistakes:

• Thinking enums can only have one type of value
• Confusing heterogeneous with union types
• Assuming enums can't mix strings and numbers

2.

Which of the following is the correct syntax to declare a heterogeneous enum?

enum Status {
  Active = 1,
  Inactive = "NO"
}

easy

A. Incorrect because enum members must be all strings.

B. Incorrect because enums cannot have string values.

C. Incorrect because enum members must be all numbers.

D. Correct syntax with mixed number and string values.

Solution

1. Step 1: Check enum member types

   The enum has one numeric value (1) and one string value ("NO").

2. Step 2: Validate TypeScript enum rules

   TypeScript allows heterogeneous enums mixing numbers and strings.

3. Final Answer:

   Correct syntax with mixed number and string values. -> Option D

4. Quick Check:

   Mixed values in enum = valid heterogeneous enum [OK]

Hint: Look for mixed number and string values in enum members [OK]

Common Mistakes:

• Assuming enums can't have string values
• Thinking all enum members must be same type
• Confusing enum syntax with object literals

3.

What will be the output of the following TypeScript code?

enum Mixed {
  Yes = 1,
  No = "NO"
}
console.log(Mixed.Yes);
console.log(Mixed.No);
console.log(Mixed[1]);

medium

A. Yes, NO, 1

B. 1, NO, Yes

C. 1, NO, undefined

D. NO, 1, Yes

Solution

1. Step 1: Check enum values

   Mixed.Yes is 1, Mixed.No is "NO".

2. Step 2: Understand reverse mapping

   Numeric enums have reverse mapping, so Mixed[1] returns "Yes".

3. Final Answer:

   1, NO, Yes -> Option B

4. Quick Check:

   Numeric enum reverse lookup works, string does not [OK]

Hint: Only numeric enum members have reverse mapping [OK]

Common Mistakes:

• Expecting string enum members to have reverse mapping
• Confusing enum member names with values
• Assuming Mixed[1] returns 1

4.

Identify the error in this heterogeneous enum declaration:

enum Colors {
  Red = "RED",
  Green,
  Blue = 3
}

medium

A. Enums cannot mix string and number values.

B. Blue cannot be assigned a number after a string member.

C. Green must have an explicit string or number value.

D. Red cannot be assigned a string value.

Solution

1. Step 1: Check enum member values

   Red is assigned a string "RED". Green has no value assigned.

2. Step 2: Understand enum auto-increment rules

   After a string member, numeric auto-increment is not allowed. Green must have explicit value.

3. Final Answer:

   Green must have an explicit string or number value. -> Option C

4. Quick Check:

   Members after string need explicit values [OK]

Hint: After string enum member, next must have explicit value [OK]

Common Mistakes:

• Assuming auto-increment works after string member
• Thinking enums can't mix types at all
• Ignoring missing value for Green

5.

You want to create a heterogeneous enum to represent user roles with numeric IDs and string labels. Which enum declaration correctly achieves this?

enum UserRole {
  Admin = 1,
  Guest = "GUEST",
  Member = 2
}

hard

A. This enum is valid and mixes numbers and strings correctly.

B. This enum is invalid because Guest must be a number.

C. This enum is invalid because Admin and Member must be strings.

D. This enum is invalid because Member cannot be a number after a string.

Solution

1. Step 1: Analyze enum member assignments

   Admin=1 (number), Guest="GUEST" (string), Member=2 (number). All explicitly assigned.

2. Step 2: Validate heterogeneous enum rules

   TypeScript allows explicit mixing of numeric and string values in enums.

3. Final Answer:

   This enum is valid and mixes numbers and strings correctly. -> Option A

4. Quick Check:

   Explicit assignments allow mixing numbers after strings [OK]

Hint: Explicit numeric assignments work after string members [OK]

Common Mistakes:

• Thinking numbers cannot follow strings even explicitly
• Confusing explicit assignments with auto-increment rules
• Assuming strict ordering prevents mixing