What survives compilation to JavaScript in Typescript - Mini Project: Build & Apply

What Survives Compilation to JavaScript

📖 Scenario: You are working on a TypeScript project that will be compiled to JavaScript to run in browsers. You want to understand which parts of your TypeScript code remain in the final JavaScript output and which parts are removed during compilation.

🎯 Goal: Build a simple TypeScript program with variables, types, interfaces, and functions. Then observe which parts appear in the compiled JavaScript output.

📋 What You'll Learn

Create a variable with a value and a type annotation

Define an interface with some properties

Create a function that uses the variable and interface

Print the result to the console

💡 Why This Matters

🌍 Real World

Understanding what TypeScript keeps or removes helps you write better code and debug issues when running JavaScript in browsers or servers.

💼 Career

Many jobs require working with TypeScript and JavaScript together, so knowing how compilation works is important for frontend and backend developers.

1

Create a typed variable

Create a variable called message with type string and value "Hello, TypeScript!".

Typescript

# Create a variable called message with type string and value "Hello, TypeScript!"
# Your code here

Hint

Use let to declare the variable, add : string after the name, and assign the value with =.

2

Define an interface

Define an interface called User with two properties: name of type string and age of type number.

Typescript

let message: string = "Hello, TypeScript!";
# Define an interface called User with properties name (string) and age (number)
# Your code here

Hint

Use the interface keyword, then list properties with their types inside curly braces.

3

Create a function using the interface

Create a function called greet that takes a parameter user of type User and returns a greeting string combining message and the user's name.

Typescript

let message: string = "Hello, TypeScript!";

interface User {
    name: string;
    age: number;
}
# Create a function greet(user: User) that returns a string combining message and user.name
# Your code here

Hint

Use a template string to combine message and user.name inside the function.

4

Print the greeting

Create a variable called user1 of type User with name as "Alice" and age as 30. Then print the result of greet(user1) using console.log.

Typescript

let message: string = "Hello, TypeScript!";

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

function greet(user: User): string {
    return `${message} Welcome, ${user.name}!`;
}
# Create user1 with name "Alice" and age 30
# Print greet(user1) using console.log
# Your code here

Hint

Use const to create user1 with the specified properties. Then call console.log(greet(user1)).

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