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.

Practice

1. Which of the following TypeScript elements does NOT survive compilation to JavaScript?

easy

A. Interfaces

B. Functions

C. Classes

D. Variables

Solution

1. Step 1: Understand TypeScript compilation

   TypeScript removes type-only constructs like interfaces during compilation.

2. Step 2: Identify which elements remain

   Functions, classes, and variables are actual code and remain in JavaScript output.

3. Final Answer:

   Interfaces -> Option A

4. Quick Check:

   Interfaces are erased in JS output [OK]

Hint: Remember: types/interfaces vanish, code stays [OK]

Common Mistakes:

• Thinking interfaces generate JavaScript code
• Confusing types with variables
• Assuming classes disappear

2. Which of these TypeScript code snippets will produce JavaScript code after compilation?

easy

A. type User = { name: string };

B. function greet() { console.log('Hi'); }

C. type ID = number | string;

D. interface User { name: string }

Solution

1. Step 1: Identify code vs type declarations

   Types and interfaces are erased; only executable code remains.

2. Step 2: Check each option

   Only the function greet produces JavaScript code.

3. Final Answer:

   function greet() { console.log('Hi'); } -> Option B

4. Quick Check:

   Functions compile to JS code [OK]

Hint: Only executable code survives compilation [OK]

Common Mistakes:

• Assuming type aliases produce JS code
• Confusing interfaces with functions
• Thinking all declarations compile to JS

3. What will be the output JavaScript code after compiling this TypeScript snippet?

interface Person { name: string; age: number; }
const user: Person = { name: 'Alice', age: 30 };
console.log(user.name);

medium

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

B. interface Person { name: string; age: number; }
const user = { name: 'Alice', age: 30 };
console.log(user.name);

C. const user: Person = { name: 'Alice', age: 30 };
console.log(user.name);

D. SyntaxError: interface not allowed in JS

Solution

1. Step 1: Remove type-only declarations

   The interface Person is removed during compilation.

2. Step 2: Remove type annotations

   The variable user loses its : Person annotation.

3. Final Answer:

   const user = { name: 'Alice', age: 30 }; console.log(user.name); -> Option A

4. Quick Check:

   Types/interfaces removed, code remains [OK]

Hint: Types vanish, only code stays in JS output [OK]

Common Mistakes:

• Leaving interface in output
• Keeping type annotations in JS
• Expecting syntax errors for interfaces

4. Identify the error in this TypeScript code that prevents correct JavaScript output:

interface Data { id: number; }
function printId(data: Data) {
  console.log(data.id);
}
printId({ id: 5 });

medium

A. The interface Data causes a runtime error in JavaScript.

B. The type annotation data: Data is removed, so data.id is undefined.

C. The function printId is removed during compilation.

D. There is no error; the code compiles to valid JavaScript.

Solution

1. Step 1: Understand interface removal

   Interfaces are erased and do not cause runtime errors.

2. Step 2: Check function and parameter

   Type annotations are removed but the function and its logic remain intact.

3. Final Answer:

   There is no error; the code compiles to valid JavaScript. -> Option D

4. Quick Check:

   Interfaces vanish, functions remain [OK]

Hint: Interfaces don't cause runtime errors [OK]

Common Mistakes:

• Thinking interfaces cause runtime errors
• Believing type annotations remain in JS
• Assuming functions get removed

5. Given this TypeScript code, what will the compiled JavaScript output be?

type Status = 'success' | 'error';
class Response {
  constructor(public status: Status) {}
  print() {
    console.log(`Status: ${this.status}`);
  }
}
const res = new Response('success');
res.print();

hard

A. SyntaxError: Type aliases not allowed in JavaScript

B. type Status = 'success' | 'error';
class Response {
constructor(public status: Status) {}
print() {
console.log(`Status: ${this.status}`);
}
}
const res = new Response('success');
res.print();

C. class Response {
constructor(status) {
this.status = status;
}
print() {
console.log(`Status: ${this.status}`);
}
}
const res = new Response('success');
res.print();

D. class Response {
constructor() {}
print() {
console.log('Status unknown');
}
}
const res = new Response();
res.print();

Solution

1. Step 1: Remove type alias

   The type Status is erased during compilation.

2. Step 2: Remove parameter type annotation

   The constructor's public status: Status becomes status without type.

3. Step 3: Keep class and method code

   The class and method remain unchanged except for type removal.

4. Final Answer:

   class Response { constructor(status) { this.status = status; } print() { console.log(`Status: ${this.status}`); } } const res = new Response('success'); res.print(); -> Option C

5. Quick Check:

   Types removed, class code remains [OK]

Hint: Types vanish, classes and methods stay intact [OK]

Common Mistakes:

• Expecting type aliases in JS output
• Thinking constructor parameters keep types
• Assuming class code is removed