How TypeScript compiles to JavaScript - Quick Revision & Summary

Recall & Review

beginner

What is the main purpose of compiling TypeScript to JavaScript?

TypeScript code is converted into JavaScript because browsers and Node.js can only run JavaScript. The compiler removes TypeScript-specific features like types and outputs plain JavaScript.

beginner

What file extension does TypeScript use and what does it produce after compilation?

TypeScript files use the .ts extension. After compilation, they produce JavaScript files with the .js extension.

beginner

How does the TypeScript compiler handle type annotations during compilation?

Type annotations are used only during development for checking errors. The compiler removes all type annotations in the output JavaScript because JavaScript does not support types.

beginner

What command is commonly used to compile a TypeScript file named app.ts?

The command is tsc app.ts. This runs the TypeScript compiler and creates a JavaScript file named app.js.

intermediate

Can TypeScript compile to different versions of JavaScript? How?

Yes. You can set the target JavaScript version (like ES5, ES6) in the tsconfig.json file or with the --target option. This controls the JavaScript features used in the output.

What does the TypeScript compiler remove when converting to JavaScript?

A Variable names

B All functions

C Comments only

D Type annotations and interfaces

The compiler removes type annotations and interfaces because JavaScript does not support them.

Which file extension is generated after compiling a TypeScript file?

A .ts

B .tsx

C .js

D .json

TypeScript files (.ts) compile into JavaScript files (.js).

Which command compiles a TypeScript file named main.ts?

A node main.ts

B tsc main.ts

C npm main.ts

D compile main.ts

The TypeScript compiler command is tsc, so tsc main.ts compiles the file.

Why do we compile TypeScript to JavaScript?

A Because JavaScript cannot run TypeScript directly

B To add more types to the code

C To make the code run faster

D To convert JavaScript to TypeScript

Browsers and Node.js only understand JavaScript, so TypeScript must be compiled to JavaScript to run.

How can you control the JavaScript version output by the TypeScript compiler?

A Using the <code>--target</code> option or <code>tsconfig.json</code>

B By renaming the output file

C By changing the file extension to .js

D By running JavaScript code first

The --target option or tsconfig.json file lets you specify the JavaScript version for the output.

Explain in your own words why TypeScript code needs to be compiled to JavaScript before running in a browser.

Think about what browsers can run and what TypeScript adds.

Describe the role of the TypeScript compiler and what happens to type annotations during compilation.

Focus on what the compiler does with types and the output.

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