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.