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

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

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

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

Hint

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

Practice

1. What does the TypeScript compiler (tsc) do when converting TypeScript code to JavaScript?

easy

A. It removes all type annotations and outputs plain JavaScript code.

B. It runs the TypeScript code directly without changes.

C. It adds extra type checks to the JavaScript code.

D. It converts JavaScript code back to TypeScript.

Solution

1. Step 1: Understand the role of the TypeScript compiler

   The tsc command compiles TypeScript code by removing type annotations and producing JavaScript code.

2. Step 2: Identify what happens to types

   Type annotations are only for development and are removed during compilation, so the output is plain JavaScript.

3. Final Answer:

   It removes all type annotations and outputs plain JavaScript code. -> Option A

4. Quick Check:

   TypeScript compiler removes types = C [OK]

Hint: Remember: TypeScript types vanish after compiling [OK]

Common Mistakes:

• Thinking TypeScript runs directly without compiling
• Believing types stay in the output JavaScript
• Confusing compilation with runtime type checks

2. Which of the following is the correct command to compile a TypeScript file named app.ts into JavaScript?

easy

A. node app.ts

B. run app.ts

C. tsc app.ts

D. compile app.ts

Solution

1. Step 1: Identify the TypeScript compiler command

   The official command to compile TypeScript files is tsc.

2. Step 2: Match the command with the file name

   Using tsc app.ts compiles the file app.ts into JavaScript.

3. Final Answer:

   tsc app.ts -> Option C

4. Quick Check:

   Compile with tsc = D [OK]

Hint: Use 'tsc filename.ts' to compile TypeScript [OK]

Common Mistakes:

• Trying to run TypeScript files directly with node
• Using incorrect commands like 'compile' or 'run'
• Confusing tsc with other tools

3. Given this TypeScript code:

function greet(name: string) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));

What will be the output after compiling and running the JavaScript?

medium

A. Hello, Alice!

B. Hello, undefined!

C. Type error at runtime

D. SyntaxError

Solution

1. Step 1: Understand the compiled JavaScript

   The TypeScript compiler removes the type : string and outputs a normal JavaScript function.

2. Step 2: Predict the function output

   Calling greet("Alice") returns the string Hello, Alice! which is logged to the console.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Function returns greeting string = A [OK]

Hint: Types disappear; output matches JavaScript logic [OK]

Common Mistakes:

• Expecting runtime type errors
• Thinking types affect output strings
• Confusing compile-time errors with runtime

4. Consider this TypeScript code:

let count: number = 5 console.log(count)

When compiling, an error occurs. What is the most likely cause?

medium

A. TypeScript does not allow number types

B. Missing semicolon after the variable declaration

C. Variable name 'count' is reserved

D. Console.log is not valid in TypeScript

Solution

1. Step 1: Check TypeScript syntax rules

   TypeScript requires semicolons or line breaks to separate statements properly.

2. Step 2: Identify missing semicolon

   The line let count: number = 5 lacks a semicolon, which can cause a compile error.

3. Final Answer:

   Missing semicolon after the variable declaration -> Option B

4. Quick Check:

   Semicolon missing = A [OK]

Hint: Always end statements with semicolons in TypeScript [OK]

Common Mistakes:

• Thinking number type is invalid
• Assuming variable names are restricted
• Believing console.log is disallowed

5. You have this TypeScript code using a new feature:

const data: Record = { a: 1, b: 2 };
console.log(data.c ?? 0);

After compiling to JavaScript, what will be the output when running the code?

hard

A. undefined

B. null

C. Error: Property 'c' does not exist

D. 0

Solution

1. Step 1: Understand the nullish coalescing operator

   The expression data.c ?? 0 returns data.c if it exists and is not null/undefined; otherwise, it returns 0.

2. Step 2: Check the property 'c' in the object

   Since data has no property c, data.c is undefined, so the expression returns 0.

3. Final Answer:

   0 -> Option D

4. Quick Check:

   Missing property with ?? returns default = B [OK]

Hint: ?? returns right side if left is null or undefined [OK]

Common Mistakes:

• Expecting undefined instead of default value
• Thinking TypeScript types affect runtime output
• Confusing null and undefined behavior