When enums add unnecessary runtime code in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of enum vs union type

What is the output of the following TypeScript code when compiled to JavaScript and run?

enum Colors {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

console.log(typeof Colors);
console.log(Colors.Red);

Typescript

enum Colors {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

console.log(typeof Colors);
console.log(Colors.Red);

A "object"\n"RED"

B "string"\n"RED"

C "undefined"\n"RED"

D "object"\nundefined

💡 Hint

Remember that enums in TypeScript compile to objects in JavaScript.

TypeScript enums compile to JavaScript objects. So typeof Colors is "object". Accessing Colors.Red returns the string "RED".

❓ Predict Output

intermediate

Output of union type vs enum

Consider this TypeScript code snippet. What will it output when run in JavaScript?

type Status = "success" | "error" | "loading";

const status: Status = "success";
console.log(status);

Typescript

type Status = "success" | "error" | "loading";

const status: Status = "success";
console.log(status);

A "success"

B undefined

C ReferenceError

D "Status"

💡 Hint

Union types disappear after compilation and do not add runtime code.

Union types are only for compile-time checks and do not exist at runtime. The variable status holds the string "success" and logs it.

🧠 Conceptual

advanced

Why enums add runtime code

Why do TypeScript enums add extra runtime code compared to union types?

A Because enums are replaced by strings at runtime automatically.

B Because enums compile to JavaScript objects to support reverse mapping and runtime access.

C Because enums are only compile-time types and do not generate any JavaScript code.

D Because enums are transpiled to functions that return values.

💡 Hint

Think about what enums provide at runtime that union types do not.

Enums compile to JavaScript objects to allow runtime access to their members and support reverse mapping (for numeric enums). Union types are erased at compile time and produce no runtime code.

❓ Predict Output

advanced

Runtime size difference between enum and union

Given these two TypeScript declarations, what will be the size in bytes of the compiled JavaScript code for each?

enum Directions {
  Up,
  Down,
  Left,
  Right
}

type DirectionsUnion = "Up" | "Down" | "Left" | "Right";

A Union type code is larger because it stores strings at runtime.

B Both produce the same size of JavaScript code.

C Enum code is larger due to generated object; union type adds no runtime code.

D Enum code is smaller because it uses numbers only.

💡 Hint

Consider what code is generated for enums vs union types.

Enums generate JavaScript objects with properties for each member, increasing code size. Union types are erased and produce no runtime code, so they add no size.

❓ Predict Output

expert

Output and runtime behavior of const enum vs enum

What is the output and runtime difference when running this code?

enum RegularEnum {
  A = 1,
  B = 2
}

const enum ConstEnum {
  A = 1,
  B = 2
}

console.log(RegularEnum.A);
console.log(ConstEnum.B);

A Throws ReferenceError because ConstEnum is not defined at runtime.

B Outputs 1 and 2; both enums exist as objects at runtime.

C Outputs undefined and 2; RegularEnum is undefined at runtime.

D Outputs 1 and 2; RegularEnum exists at runtime, ConstEnum is inlined and does not exist at runtime.

💡 Hint

Recall how const enums are compiled differently than regular enums.

Regular enums compile to objects available at runtime. Const enums are inlined by the compiler and do not generate runtime objects, so their values are replaced directly in code.

Practice

1. What is a main reason to avoid using regular enums in TypeScript when you only need type checking?

easy

A. They add extra runtime code that may be unnecessary.

B. They cause syntax errors in modern TypeScript versions.

C. They cannot be used with functions.

D. They do not support string values.

Solution

1. Step 1: Understand what regular enums generate

   Regular enums create extra JavaScript code that runs when your program runs, even if you only want type checks.

2. Step 2: Identify the impact of extra runtime code

   This extra code can increase bundle size and slow down execution unnecessarily if you only need compile-time type safety.

3. Final Answer:

   They add extra runtime code that may be unnecessary. -> Option A

4. Quick Check:

   Extra runtime code = Avoid regular enums when only type checks needed [OK]

Hint: Remember: regular enums add runtime code, const enums don't [OK]

Common Mistakes:

• Thinking enums cause syntax errors
• Believing enums can't hold string values
• Assuming enums can't be used with functions

2. Which syntax correctly declares a const enum in TypeScript to avoid runtime code?

easy

A. enum Colors { Red, Green, Blue }

B. const Colors = enum { Red, Green, Blue }

C. const enum Colors { Red, Green, Blue }

D. enum const Colors { Red, Green, Blue }

Solution

1. Step 1: Recall the correct const enum syntax

   The correct way to declare a const enum is by placing the keyword const before enum like const enum Colors { ... }.

2. Step 2: Identify incorrect options

   enum Colors { Red, Green, Blue } is a regular enum, not const. const Colors = enum { Red, Green, Blue } and D have invalid syntax order or structure.

3. Final Answer:

   const enum Colors { Red, Green, Blue } -> Option C

4. Quick Check:

   const enum syntax = const enum Name { ... } [OK]

Hint: const enum always starts with 'const enum' keywords [OK]

Common Mistakes:

• Placing const after enum
• Using invalid syntax like 'const Colors = enum'
• Confusing regular enum with const enum

3. What will be the output of this TypeScript code when compiled and run in JavaScript?

const enum Status { Active, Inactive }
const current = Status.Active;
console.log(current);

medium

A. Status.Active

B. 0

C. undefined

D. Error at runtime

Solution

1. Step 1: Understand const enum compilation

   Const enums are inlined by the compiler, so Status.Active becomes the numeric value 0 directly in the output JavaScript.

2. Step 2: Predict the console output

   Since current is assigned Status.Active, which is 0, the console.log prints 0.

3. Final Answer:

   0 -> Option B

4. Quick Check:

   const enum values inline as numbers [OK]

Hint: const enum values become numbers directly in output [OK]

Common Mistakes:

• Expecting enum object at runtime
• Thinking it prints the enum name
• Assuming runtime error due to const enum

4. Identify the problem in this TypeScript code snippet that uses a regular enum:

enum Direction { Up, Down }
function move(dir: Direction) {
  console.log(dir);
}
move(Direction.Left);

medium

A. The function move should return a value.

B. Enums cannot be used as function parameters.

C. The enum must be declared as const enum.

D. Direction.Left does not exist, causing a compile error.

Solution

1. Step 1: Check enum members

   The enum Direction only has Up and Down. Left is not defined.

2. Step 2: Understand the error cause

   Using Direction.Left causes a compile-time error because Left is not a valid member.

3. Final Answer:

   Direction.Left does not exist, causing a compile error. -> Option D

4. Quick Check:

   Using undefined enum member = compile error [OK]

Hint: Use only defined enum members to avoid errors [OK]

Common Mistakes:

• Assuming enums can't be function parameters
• Thinking const enum is required here
• Expecting runtime error instead of compile error

5. You want to define a set of string values for user roles without adding runtime code. Which TypeScript approach is best?

hard

A. Use a union of string literal types.

B. Use a regular enum with string values.

C. Use a const enum with string values.

D. Use a class with static string properties.

Solution

1. Step 1: Understand runtime code from enums

   Regular enums with string values generate runtime code. Const enums with string values are not allowed in TypeScript.

2. Step 2: Identify the best alternative

   Using a union of string literal types (e.g., 'admin' | 'user' | 'guest') provides type safety without any runtime code.

3. Final Answer:

   Use a union of string literal types. -> Option A

4. Quick Check:

   String unions avoid runtime code unlike enums [OK]

Hint: Use string unions for roles to skip runtime code [OK]

Common Mistakes:

• Trying to use const enum with strings (not allowed)
• Choosing regular enums causing extra code
• Using classes adds unnecessary complexity