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.

Practice

1. What does the TypeScript compiler (tsc) do when converting TypeScript code to JavaScript?

easy

A. It removes all type annotations and outputs plain JavaScript code.

B. It runs the TypeScript code directly without changes.

C. It adds extra type checks to the JavaScript code.

D. It converts JavaScript code back to TypeScript.

Solution

1. Step 1: Understand the role of the TypeScript compiler

   The tsc command compiles TypeScript code by removing type annotations and producing JavaScript code.

2. Step 2: Identify what happens to types

   Type annotations are only for development and are removed during compilation, so the output is plain JavaScript.

3. Final Answer:

   It removes all type annotations and outputs plain JavaScript code. -> Option A

4. Quick Check:

   TypeScript compiler removes types = C [OK]

Hint: Remember: TypeScript types vanish after compiling [OK]

Common Mistakes:

• Thinking TypeScript runs directly without compiling
• Believing types stay in the output JavaScript
• Confusing compilation with runtime type checks

2. Which of the following is the correct command to compile a TypeScript file named app.ts into JavaScript?

easy

A. node app.ts

B. run app.ts

C. tsc app.ts

D. compile app.ts

Solution

1. Step 1: Identify the TypeScript compiler command

   The official command to compile TypeScript files is tsc.

2. Step 2: Match the command with the file name

   Using tsc app.ts compiles the file app.ts into JavaScript.

3. Final Answer:

   tsc app.ts -> Option C

4. Quick Check:

   Compile with tsc = D [OK]

Hint: Use 'tsc filename.ts' to compile TypeScript [OK]

Common Mistakes:

• Trying to run TypeScript files directly with node
• Using incorrect commands like 'compile' or 'run'
• Confusing tsc with other tools

3. Given this TypeScript code:

function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));

What will be the output after compiling and running the JavaScript?

medium

A. Hello, Alice!

B. Hello, undefined!

C. Type error at runtime

D. SyntaxError

Solution

1. Step 1: Understand the compiled JavaScript

   The TypeScript compiler removes the type : string and outputs a normal JavaScript function.

2. Step 2: Predict the function output

   Calling greet("Alice") returns the string Hello, Alice! which is logged to the console.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Function returns greeting string = A [OK]

Hint: Types disappear; output matches JavaScript logic [OK]

Common Mistakes:

• Expecting runtime type errors
• Thinking types affect output strings
• Confusing compile-time errors with runtime

4. Consider this TypeScript code:

let count: number = 5 console.log(count)

When compiling, an error occurs. What is the most likely cause?

medium

A. TypeScript does not allow number types

B. Missing semicolon after the variable declaration

C. Variable name 'count' is reserved

D. Console.log is not valid in TypeScript

Solution

1. Step 1: Check TypeScript syntax rules

   TypeScript requires semicolons or line breaks to separate statements properly.

2. Step 2: Identify missing semicolon

   The line let count: number = 5 lacks a semicolon, which can cause a compile error.

3. Final Answer:

   Missing semicolon after the variable declaration -> Option B

4. Quick Check:

   Semicolon missing = A [OK]

Hint: Always end statements with semicolons in TypeScript [OK]

Common Mistakes:

• Thinking number type is invalid
• Assuming variable names are restricted
• Believing console.log is disallowed

5. You have this TypeScript code using a new feature:

const data: Record = { a: 1, b: 2 };
console.log(data.c ?? 0);

After compiling to JavaScript, what will be the output when running the code?

hard

A. undefined

B. null

C. Error: Property 'c' does not exist

D. 0

Solution

1. Step 1: Understand the nullish coalescing operator

   The expression data.c ?? 0 returns data.c if it exists and is not null/undefined; otherwise, it returns 0.

2. Step 2: Check the property 'c' in the object

   Since data has no property c, data.c is undefined, so the expression returns 0.

3. Final Answer:

   0 -> Option D

4. Quick Check:

   Missing property with ?? returns default = B [OK]

Hint: ?? returns right side if left is null or undefined [OK]

Common Mistakes:

• Expecting undefined instead of default value
• Thinking TypeScript types affect runtime output
• Confusing null and undefined behavior