How TypeScript compiles to JavaScript - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this compiled JavaScript code?

Given this TypeScript code snippet and its compiled JavaScript output, what will be printed when the JavaScript runs?

Typescript

TypeScript:
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};
console.log(greet("Alice"));

Compiled JavaScript:
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("Alice"));

A undefined

B Hello, Alice!

C Hello, undefined!

D SyntaxError

💡 Hint

Look at how the TypeScript types disappear in the compiled JavaScript but the function logic stays the same.

The TypeScript types are removed during compilation. The JavaScript function still returns the greeting string with the name passed in, so it prints "Hello, Alice!".

❓ Predict Output

intermediate

What error does this compiled JavaScript code produce?

Consider this TypeScript code and its compiled JavaScript. What error will the JavaScript code throw when run?

Typescript

TypeScript:
function add(a: number, b: number): number {
  return a + b;
}
console.log(add(5, "3"));

Compiled JavaScript:
function add(a, b) {
  return a + b;
}
console.log(add(5, "3"));

A 53

B 8

C SyntaxError

D TypeError: Cannot add number and string

💡 Hint

Remember JavaScript's behavior when adding a number and a string.

JavaScript converts the number 5 to a string and concatenates it with "3", resulting in the string "53".

🔧 Debug

advanced

Why does this compiled JavaScript code throw a ReferenceError?

Look at this TypeScript code and the compiled JavaScript. When running the JavaScript, it throws a ReferenceError. Why?

Typescript

TypeScript:
let count: number = 10;
if (count > 5) {
  let message = "Count is high";
  console.log(message);
}
console.log(message);

Compiled JavaScript:
let count = 10;
if (count > 5) {
  let message = "Count is high";
  console.log(message);
}
console.log(message);

A 'message' is not declared anywhere

B Because let variables cannot be logged

C Because 'count' is not defined

D Because 'message' is block-scoped and not accessible outside the if block

💡 Hint

Think about variable scope in JavaScript and TypeScript after compilation.

The variable 'message' is declared with let inside the if block, so it only exists inside that block. The last console.log tries to access it outside, causing a ReferenceError.

🧠 Conceptual

advanced

What does the TypeScript compiler remove during compilation?

Which of the following does the TypeScript compiler remove when converting TypeScript to JavaScript?

A Type annotations and interfaces

B All variable declarations

C Function bodies

D String literals

💡 Hint

Think about what JavaScript needs to run and what TypeScript adds only for development.

TypeScript removes type annotations and interfaces because JavaScript does not support types natively. It keeps variable declarations and function bodies intact.

📝 Syntax

expert

Which compiled JavaScript code matches this TypeScript enum?

Given this TypeScript enum, which JavaScript code is the correct compiled output?

Typescript

TypeScript:
enum Direction {
  Up,
  Down,
  Left,
  Right
}
console.log(Direction.Up);

A

const Direction = { Up: 0, Down: 1, Left: 2, Right: 3 };
console.log(Direction.Up);

B

enum Direction { Up: 0, Down: 1, Left: 2, Right: 3 }
console.log(Direction.Up);

C

var Direction;
(function (Direction) {
  Direction[Direction["Up"] = 0] = "Up";
  Direction[Direction["Down"] = 1] = "Down";
  Direction[Direction["Left"] = 2] = "Left";
  Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
console.log(Direction.Up);

D

let Direction = ['Up', 'Down', 'Left', 'Right'];
console.log(Direction[0]);

💡 Hint

TypeScript enums compile to a self-invoking function that creates a bidirectional mapping object.

TypeScript compiles enums into an object with numeric keys and string values for reverse lookup, using an IIFE to initialize it. Option C shows this pattern.