How TypeScript compiles to JavaScript - Why You Should Know This

The Big Idea

What if your code could warn you about mistakes before you even run it?

The Scenario

Imagine writing a big program with many variables and functions, but you have to check every single line yourself to find mistakes before running it.

You write code, then run it, and if it crashes, you guess where the problem might be.

The Problem

This way is slow and frustrating because you spend a lot of time fixing errors after running the program.

It's easy to miss small mistakes that cause big problems later.

The Solution

TypeScript helps by checking your code for errors before you run it.

Then, it turns your TypeScript code into plain JavaScript that browsers and computers understand perfectly.

Before vs After

✗ Before

let x = 5;
x = 'hello';  // no error until runtime

✓ After

let x: number = 5;
x = 'hello';  // error caught before running

What It Enables

You can write safer code with fewer bugs and still run it anywhere JavaScript runs.

Real Life Example

A developer writes a web app using TypeScript, catches mistakes early, and then compiles it to JavaScript to run smoothly in all browsers.

Key Takeaways

Manual error checking is slow and risky.

TypeScript finds errors before running code.

It compiles to JavaScript that works everywhere.

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