Numeric enums in Typescript - Mini Project: Build & Apply

Numeric enums

📖 Scenario: Imagine you are creating a simple program to represent the days of the week using numbers. Each day will have a number starting from 0 for Sunday, 1 for Monday, and so on.

🎯 Goal: You will create a numeric enum called Days for the days of the week, then write code to get the number for Wednesday and print it.

📋 What You'll Learn

Create a numeric enum called Days with days Sunday to Saturday starting at 0

Create a variable called midWeek and assign it the value of Days.Wednesday

Print the value of midWeek to the console

💡 Why This Matters

🌍 Real World

Numeric enums are useful when you want to represent a fixed set of related constants with numbers, like days, months, or status codes.

💼 Career

Understanding enums helps in writing clear and maintainable code in TypeScript, which is widely used in web development and software engineering jobs.

1

Create the numeric enum

Create a numeric enum called Days with these exact members and values: Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6.

Typescript

// Your code here

Hint

Use the enum keyword followed by the name Days. Assign numbers starting at 0 to each day.

2

Assign a variable from the enum

Create a variable called midWeek and assign it the value Days.Wednesday.

Typescript

enum Days {
  Sunday = 0,
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3,
  Thursday = 4,
  Friday = 5,
  Saturday = 6
}

// Your code here

Hint

Use let midWeek = Days.Wednesday; to assign the enum value.

3

Use the enum value in a function

Create a function called isMidWeek that takes a parameter day of type Days and returns true if day equals Days.Wednesday, otherwise false. Then call isMidWeek with midWeek and assign the result to a variable called check.

Typescript

enum Days {
  Sunday = 0,
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3,
  Thursday = 4,
  Friday = 5,
  Saturday = 6
}

let midWeek = Days.Wednesday;

// Your code here

Hint

Write a function that compares the input day to Days.Wednesday and returns true or false.

4

Print the result

Print the value of midWeek and the value of check to the console using two separate console.log statements.

Typescript

enum Days {
  Sunday = 0,
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3,
  Thursday = 4,
  Friday = 5,
  Saturday = 6
}

let midWeek = Days.Wednesday;

function isMidWeek(day: Days): boolean {
  return day === Days.Wednesday;
}

let check = isMidWeek(midWeek);

// Your code here

Hint

Use console.log(midWeek); and console.log(check); to print the values.

Practice

1. What is a numeric enum in TypeScript used for?

easy

A. To declare variables without types

B. To assign names to numeric values for better code clarity

C. To define functions with numeric parameters

D. To create string-only constants

Solution

1. Step 1: Understand enum purpose

   Numeric enums give meaningful names to numbers, making code easier to read.

2. Step 2: Compare options

   Only To assign names to numeric values for better code clarity correctly describes numeric enums as naming numbers for clarity.

3. Final Answer:

   To assign names to numeric values for better code clarity -> Option B

4. Quick Check:

   Numeric enums = named numbers [OK]

Hint: Enums name numbers to avoid magic numbers [OK]

Common Mistakes:

• Confusing enums with string constants
• Thinking enums declare variables
• Assuming enums define functions

2. Which of the following is the correct syntax to declare a numeric enum in TypeScript?

easy

A. enum Colors { Red = 1, Green, Blue }

B. enum Colors = { Red: 1, Green: 2, Blue: 3 }

C. enum Colors (Red = 1, Green, Blue)

D. enum Colors { Red: 1; Green; Blue }

Solution

1. Step 1: Recall enum syntax

   TypeScript enums use curly braces with members separated by commas, and assignment uses '='.

2. Step 2: Check each option

   enum Colors { Red = 1, Green, Blue } uses correct syntax: enum name, braces, members with '=' and commas.

3. Final Answer:

   enum Colors { Red = 1, Green, Blue } -> Option A

4. Quick Check:

   Correct enum syntax uses braces and '=' [OK]

Hint: Use braces and '=' for enum members [OK]

Common Mistakes:

• Using '=' after enum name
• Using colons instead of '=' for values
• Separating members with semicolons

3. What will be the output of this code?

enum Status {
  Ready = 3,
  Waiting,
  Done
}
console.log(Status.Waiting);

medium

A. 3

B. 5

C. 4

D. undefined

Solution

1. Step 1: Understand enum auto-increment

   Ready is set to 3, so Waiting becomes 4, and Done becomes 5 automatically.

2. Step 2: Identify logged value

   console.log(Status.Waiting) prints 4, the auto-incremented value after 3.

3. Final Answer:

   4 -> Option C

4. Quick Check:

   Auto-increment after 3 = 4 [OK]

Hint: Next enum value auto-increments by 1 [OK]

Common Mistakes:

• Assuming Waiting equals 3
• Thinking enum values reset automatically
• Expecting string output

4. Identify the error in this enum declaration:

enum Direction {
  Up = 1,
  Down = 2
  Left = 3,
  Right = 4
}

medium

A. Cannot mix assigned and unassigned members

B. Enum members cannot have assigned values

C. Enum name must be lowercase

D. Missing comma after Down = 2

Solution

1. Step 1: Check enum member separators

   Enum members must be separated by commas. After 'Down = 2' there is no comma.

2. Step 2: Validate other rules

   Assigned values are allowed, enum names can be uppercase, and mixing assigned/unassigned is allowed.

3. Final Answer:

   Missing comma after Down = 2 -> Option D

4. Quick Check:

   Enum members need commas [OK]

Hint: Check commas between enum members [OK]

Common Mistakes:

• Forgetting commas between members
• Thinking enum names must be lowercase
• Believing all members must be unassigned

5. Given this enum:

enum Levels {
  Low = 1,
  Medium = Low * 2,
  High = Medium + 2
}

What is the value of Levels.High?

hard

A. 4

B. 6

C. 5

D. 8

Solution

1. Step 1: Calculate Medium value

   Medium = Low * 2 = 1 * 2 = 2.

2. Step 2: Calculate High value

   High = Medium + 2 = 2 + 2 = 4.

3. Step 3: Re-check calculations

   Medium is 2, High is 4. This is correct.

4. Step 4: Confirm enum constant expressions

   TypeScript allows constant expressions. Low=1, Medium=2, High=4.

5. Final Answer:

   4 -> Option A

6. Quick Check:

   Levels.High = 4 [OK]

Hint: Calculate enum expressions step-by-step [OK]

Common Mistakes:

• Ignoring expression evaluation order
• Assuming High equals Medium + Low
• Confusing enum values with indexes