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.