How TypeScript compiles to JavaScript - Visual Walkthrough

Concept Flow - How TypeScript compiles to JavaScript

Write TypeScript code

↓

Run tsc compiler

↓

TypeScript code parsed

↓

Type checking & error reporting

↓

Remove types & convert to JS

↓

Generate JavaScript output

↓

Run JavaScript in browser or Node.js

TypeScript code is written and then compiled by the tsc tool, which checks types, removes type info, and outputs plain JavaScript.

Execution Sample

Typescript

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

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

This TypeScript function takes a string and returns a greeting, then logs it to the console.

Execution Table

Step	Action	Input Code	Output Code	Notes
1	Input TypeScript code	function greet(name: string) { return `Hello, ${name}!`; } console.log(greet("Alice"));	Same as input	Original code with type annotation
2	Parse and type check	Check 'name: string' type	No output code change	TypeScript verifies 'name' is string
3	Remove type annotations	Remove ': string' from parameter	function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice"));	Types removed for JS compatibility
4	Generate JavaScript	Output JS code without types	function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice"));	Final JS code ready to run
5	Run JavaScript	Run in Node.js or browser	Console output: Hello, Alice!	JS runs normally without types

💡 Compilation ends after generating JavaScript code without type annotations.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
name	string type (TS)	no type (JS)	no type (JS)	no type (JS)

Key Moments - 3 Insights

Why does the compiled JavaScript not have any type annotations?

Because TypeScript types are only for development and are removed during compilation, as shown in step 3 of the execution_table.

Does the JavaScript output run slower because it was compiled from TypeScript?

No, the output JavaScript runs like normal JavaScript since types are removed and do not affect runtime, as seen in step 5.

What happens if there is a type error in the TypeScript code?

The compiler reports errors during step 2 and stops generating JavaScript until errors are fixed.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A TypeScript code is written

B Type annotations are removed from the code

C JavaScript code is executed

D Errors are reported

💡 Hint

Check the 'Action' and 'Notes' columns in step 3 of the execution_table.

At which step does the TypeScript compiler check for type errors?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look for 'type check' in the 'Action' column of the execution_table.

If you add a type error in the code, what will change in the execution flow?

A The compiler will skip type checking

B JavaScript will be generated anyway

C Compilation will stop at type checking with errors

D The output JavaScript will include type annotations

💡 Hint

Refer to the key_moments about what happens when there is a type error.

Concept Snapshot

TypeScript code includes types for safety.
The tsc compiler checks types and removes them.
Output is plain JavaScript without types.
JavaScript runs normally in browsers or Node.js.
Type errors stop compilation until fixed.

Full Transcript

This visual trace shows how TypeScript code is compiled to JavaScript. First, you write TypeScript code with type annotations. Then the TypeScript compiler parses and checks the code for type errors. If no errors are found, it removes all type annotations and generates plain JavaScript code. This JavaScript code runs normally in browsers or Node.js. The key point is that types exist only during development and are removed before running the code. If there are type errors, the compiler stops and reports them, preventing JavaScript output until fixed.

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