How TypeScript compiles to JavaScript - Try It Yourself

How TypeScript compiles to JavaScript

📖 Scenario: You are learning how TypeScript code is turned into JavaScript code that browsers can run. This is important because browsers do not understand TypeScript directly.Imagine you write a recipe in your own special language (TypeScript), but your friend only understands English (JavaScript). You need to translate your recipe so your friend can cook it.

🎯 Goal: Build a simple TypeScript program and see how it compiles into JavaScript code.You will write TypeScript code, then add a configuration to control compilation, then compile it, and finally see the JavaScript output.

📋 What You'll Learn

Create a TypeScript variable with a type annotation

Add a TypeScript compiler option variable

Write a function using TypeScript syntax

Show the compiled JavaScript output

💡 Why This Matters

🌍 Real World

TypeScript is used to write safer and clearer code for web apps. It compiles to JavaScript so browsers can run it.

💼 Career

Many companies use TypeScript for frontend and backend development. Understanding compilation helps in debugging and optimizing code.

1

Create a TypeScript variable with a type

Create a variable called greeting with type string and set it to "Hello, TypeScript!"

Typescript

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

Need a hint?

Use let keyword, then variable name greeting, then : string to specify the type, then = and the string value.

2

Add a TypeScript compiler option variable

Create a constant called compilerOptions and set it to an object with the property target set to "ES6"

Typescript

let greeting: string = "Hello, TypeScript!";
// Create a constant compilerOptions with target set to "ES6"
// Your code here

Need a hint?

Use const keyword, name compilerOptions, and assign an object with target: "ES6".

3

Write a TypeScript function using type annotations

Write a function called sayHello that takes a parameter name of type string and returns a string greeting using greeting and name

Typescript

let greeting: string = "Hello, TypeScript!";
const compilerOptions = { target: "ES6" };
// Write a function sayHello(name: string): string that returns `${greeting} ${name}`
// Your code here

Need a hint?

Use function keyword, specify parameter type name: string, return type : string, and use template string to combine greeting and name.

4

Print the result of the function call

Write a console.log statement to print the result of calling sayHello with the argument "World"

Typescript

let greeting: string = "Hello, TypeScript!";
const compilerOptions = { target: "ES6" };
function sayHello(name: string): string {
    return `${greeting} ${name}`;
}
// Print the result of sayHello("World") using console.log
// Your code here

Need a hint?

Use console.log(sayHello("World")) to show the greeting message.