What survives compilation to JavaScript in Typescript - Step-by-Step Execution

Concept Flow - What survives compilation to JavaScript

Write TypeScript code

↓

Run TypeScript compiler

↓

Compiler removes types and interfaces

↓

Compiler converts modern syntax to JS

↓

Output JavaScript code

↓

Run JS in browser or Node.js

TypeScript code is compiled by removing types and interfaces, then converted to JavaScript syntax that runs in browsers or Node.js.

Execution Sample

Typescript

interface User {
  name: string;
  age: number;
}

const user: User = { name: "Alice", age: 30 };
console.log(user.name);

This TypeScript code defines an interface and a typed object, then logs the name property.

Execution Table

Step	Action	Input Code	Output Code	Notes
1	Start with TypeScript code	interface User { name: string; age: number; } const user: User = { name: "Alice", age: 30 }; console.log(user.name);	Same as input	Types and interface present
2	Remove interface and types	interface User { ... } const user: User = { ... }	const user = { name: "Alice", age: 30 }; console.log(user.name);	Types and interface removed
3	Keep JavaScript syntax	const user = { name: "Alice", age: 30 }; console.log(user.name);	const user = { name: "Alice", age: 30 }; console.log(user.name);	JS code ready to run
4	Output JavaScript	N/A	const user = { name: "Alice", age: 30 }; console.log(user.name);	Final JS code after compilation
5	Run JavaScript	N/A	Alice	Output printed to console

💡 Compilation ends after types and interfaces are removed, leaving runnable JavaScript code.

Variable Tracker

Variable	Start (TS)	After Compilation (JS)	At Runtime
user	{ name: string; age: number }	{ name: "Alice", age: 30 }	{ name: "Alice", age: 30 }

Key Moments - 3 Insights

Why don't interfaces appear in the compiled JavaScript?

Interfaces are only for type checking during development and are removed during compilation, as shown in execution_table step 2.

Do type annotations like ': User' exist in the final JavaScript?

No, type annotations are removed by the compiler because JavaScript does not support types, as seen in execution_table step 2.

What parts of TypeScript code remain in the JavaScript output?

Only the actual JavaScript code like variable declarations and function calls remain, as shown in execution_table steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table step 2, what happens to the interface declaration?

A It is removed and does not appear in JavaScript

B It is converted to a JavaScript object

C It is kept as a comment in JavaScript

D It is renamed to a JavaScript function

💡 Hint

Check the 'Output Code' column in step 2 where interface disappears.

According to variable_tracker, what is the value of 'user' after compilation?

A Undefined

B A type annotation only

C An object with name and age properties

D An interface

💡 Hint

Look at the 'After Compilation (JS)' column for 'user' in variable_tracker.

At which step in execution_table does the code become runnable JavaScript?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

See the 'Notes' column for step 3 describing JS code ready to run.

Concept Snapshot

TypeScript code includes types and interfaces.
The compiler removes all types and interfaces.
Only JavaScript syntax remains after compilation.
The output runs in browsers or Node.js.
Types help during development but do not exist at runtime.

Full Transcript

This visual trace shows how TypeScript code is compiled to JavaScript. First, the TypeScript code includes interfaces and type annotations. The compiler removes these types and interfaces because JavaScript does not support them. Then, the remaining JavaScript code is output and can run in browsers or Node.js. Variables like objects keep their values, but type information is lost. This process ensures type safety during development without affecting runtime performance.