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

Need a 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

Need a 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

Need a 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

Need a hint?

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