How TypeScript compiles to JavaScript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with a type in TypeScript.

Typescript

let message: [1] = 'Hello, TypeScript!';

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number type for a text variable.

Omitting the type annotation.

In TypeScript, you declare a variable's type after a colon. Here, string is the correct type for text.

2fill in blank

medium

Complete the code to define a function with typed parameters in TypeScript.

Typescript

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

Drag options to blanks, or click blank then click option'

Anumber

Bboolean

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean for a text parameter.

Not specifying a return type.

The parameter name should be a string because it represents text.

3fill in blank

hard

Fix the error in the TypeScript code by completing the type annotation.

Typescript

let count: [1] = 10;
count = 'ten'; // Error: Type mismatch

Drag options to blanks, or click blank then click option'

Anumber

Bany

Cboolean

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type but assigning a number.

Ignoring the type mismatch error.

The variable count is assigned a number initially, so its type should be number. Assigning a string later causes an error.

4fill in blank

hard

Complete the code to create a typed interface and use it in a function parameter.

Typescript

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

function printUser(user: {BLANK_2}}) {
  console.log(`${user.name} is ${user.age} years old.`);
}

Drag options to blanks, or click blank then click option'

A{

BUser

C}

DPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong braces or missing them.

Using a different name than the interface for the parameter type.

The interface body starts with { and the function parameter type is the interface name User.

5fill in blank

hard

Fill all three blanks to write a TypeScript class with a constructor and a method.

Typescript

class [1] {
  name: string;
  constructor(name: [2]) {
    this.name = name;
  }
  greet(): [3] {
    return `Hello, ${this.name}!`;
  }
}

Drag options to blanks, or click blank then click option'

APerson

Bstring

DUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent class names.

Omitting types in constructor or method.

The class is named Person, the constructor parameter type is string, and the greet method returns a string.

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