What survives compilation to JavaScript in Typescript

Introduction

TypeScript code is changed into JavaScript so browsers can understand it. But not everything in TypeScript becomes JavaScript code.

When you want to know which parts of your TypeScript code will run in the browser.

When debugging JavaScript generated from TypeScript.

When learning how TypeScript helps without adding extra code.

When optimizing your code size by understanding what stays after compiling.

Syntax

Typescript

// TypeScript code example
let x: number = 5;
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

// After compilation, types and interfaces are removed.

TypeScript types and interfaces do not appear in the JavaScript output.

Functions and variables remain as JavaScript code.

Examples

The interface Person is removed after compilation. Only the object user remains in JavaScript.

Typescript

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

const user: Person = { name: 'Alice', age: 30 };

The function add stays in JavaScript but the type annotations are removed.

Typescript

function add(a: number, b: number): number {
  return a + b;
}

The type alias ID is removed. Only the variable userId remains.

Typescript

type ID = string | number;

let userId: ID = 123;

Sample Program

This TypeScript code defines an interface and a class. After compilation, the interface is removed but the class and its methods remain as JavaScript code.

Typescript

interface Animal {
  name: string;
  speak(): void;
}

class Dog implements Animal {
  constructor(public name: string) {}
  speak() {
    console.log(`${this.name} says Woof!`);
  }
}

const dog = new Dog('Buddy');
dog.speak();

Important Notes

TypeScript's types, interfaces, and enums are removed during compilation.

Classes, functions, variables, and actual code logic remain in JavaScript.

TypeScript helps catch errors before running code but does not add extra code to JavaScript output.

Summary

TypeScript types and interfaces do not survive compilation.

Actual code like functions, classes, and variables remain in JavaScript.

Compilation removes only type information, keeping runnable code intact.

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