What survives compilation to JavaScript in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable that will appear in the compiled JavaScript.

Typescript

let [1] = 5;

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

Anumber

Bcount

Ctype

Dinterface

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a TypeScript type or interface name instead of a variable name.

The variable name count will appear in the compiled JavaScript. Types like number, type, and interface are removed during compilation.

2fill in blank

medium

Complete the code to declare a function that will be present in the compiled JavaScript.

Typescript

function [1]() { return 10; }

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

Acalculate

BMyType

CNumber

DIResult

Attempts:

3 left

💡 Hint

Common Mistakes

Using type or interface names as function names.

The function name calculate will appear in the compiled JavaScript. Types and interfaces like MyType, Number, and IResult are removed.

3fill in blank

hard

Fix the error in the code so that the variable survives compilation.

Typescript

const [1]: string = "hello";

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

Atype

Bstring

Cgreeting

Dinterface

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a type or interface keyword as variable name.

The variable greeting will be present in the compiled JavaScript. The type annotation : string is removed, but the variable name remains.

4fill in blank

hard

Fill both blanks to create a class and method that survive compilation.

Typescript

class [1] {
  [2]() { return 42; }
}

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

ACalculator

Bcompute

CIResult

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using type or interface names as class or method names.

The class Calculator and its method compute will appear in the compiled JavaScript. Types like IResult and number do not survive.

5fill in blank

hard

Fill all three blanks to create an object with a property and a method that survive compilation.

Typescript

const obj = {
  [1]: 10,
  [2]() { return this.[3]; }
};

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

Avalue

BgetValue

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using type names as property or method names.

The property value and method getValue survive compilation. The method returns the property value. The type type does not survive.

Practice

1. Which of the following TypeScript elements does NOT survive compilation to JavaScript?

easy

A. Interfaces

B. Functions

C. Classes

D. Variables

Solution

1. Step 1: Understand TypeScript compilation

   TypeScript removes type-only constructs like interfaces during compilation.

2. Step 2: Identify which elements remain

   Functions, classes, and variables are actual code and remain in JavaScript output.

3. Final Answer:

   Interfaces -> Option A

4. Quick Check:

   Interfaces are erased in JS output [OK]

Hint: Remember: types/interfaces vanish, code stays [OK]

Common Mistakes:

• Thinking interfaces generate JavaScript code
• Confusing types with variables
• Assuming classes disappear

2. Which of these TypeScript code snippets will produce JavaScript code after compilation?

easy

A. type User = { name: string };

B. function greet() { console.log('Hi'); }

C. type ID = number | string;

D. interface User { name: string }

Solution

1. Step 1: Identify code vs type declarations

   Types and interfaces are erased; only executable code remains.

2. Step 2: Check each option

   Only the function greet produces JavaScript code.

3. Final Answer:

   function greet() { console.log('Hi'); } -> Option B

4. Quick Check:

   Functions compile to JS code [OK]

Hint: Only executable code survives compilation [OK]

Common Mistakes:

• Assuming type aliases produce JS code
• Confusing interfaces with functions
• Thinking all declarations compile to JS

3. What will be the output JavaScript code after compiling this TypeScript snippet?

interface Person { name: string; age: number; }
const user: Person = { name: 'Alice', age: 30 };
console.log(user.name);

medium

A. const user = { name: 'Alice', age: 30 };
console.log(user.name);

B. interface Person { name: string; age: number; }
const user = { name: 'Alice', age: 30 };
console.log(user.name);

C. const user: Person = { name: 'Alice', age: 30 };
console.log(user.name);

D. SyntaxError: interface not allowed in JS

Solution

1. Step 1: Remove type-only declarations

   The interface Person is removed during compilation.

2. Step 2: Remove type annotations

   The variable user loses its : Person annotation.

3. Final Answer:

   const user = { name: 'Alice', age: 30 }; console.log(user.name); -> Option A

4. Quick Check:

   Types/interfaces removed, code remains [OK]

Hint: Types vanish, only code stays in JS output [OK]

Common Mistakes:

• Leaving interface in output
• Keeping type annotations in JS
• Expecting syntax errors for interfaces

4. Identify the error in this TypeScript code that prevents correct JavaScript output:

interface Data { id: number; }
function printId(data: Data) {
  console.log(data.id);
}
printId({ id: 5 });

medium

A. The interface Data causes a runtime error in JavaScript.

B. The type annotation data: Data is removed, so data.id is undefined.

C. The function printId is removed during compilation.

D. There is no error; the code compiles to valid JavaScript.

Solution

1. Step 1: Understand interface removal

   Interfaces are erased and do not cause runtime errors.

2. Step 2: Check function and parameter

   Type annotations are removed but the function and its logic remain intact.

3. Final Answer:

   There is no error; the code compiles to valid JavaScript. -> Option D

4. Quick Check:

   Interfaces vanish, functions remain [OK]

Hint: Interfaces don't cause runtime errors [OK]

Common Mistakes:

• Thinking interfaces cause runtime errors
• Believing type annotations remain in JS
• Assuming functions get removed

5. Given this TypeScript code, what will the compiled JavaScript output be?

type Status = 'success' | 'error';
class Response {
  constructor(public status: Status) {}
  print() {
    console.log(`Status: ${this.status}`);
  }
}
const res = new Response('success');
res.print();

hard

A. SyntaxError: Type aliases not allowed in JavaScript

B. type Status = 'success' | 'error';
class Response {
constructor(public status: Status) {}
print() {
console.log(`Status: ${this.status}`);
}
}
const res = new Response('success');
res.print();

C. class Response {
constructor(status) {
this.status = status;
}
print() {
console.log(`Status: ${this.status}`);
}
}
const res = new Response('success');
res.print();

D. class Response {
constructor() {}
print() {
console.log('Status unknown');
}
}
const res = new Response();
res.print();

Solution

1. Step 1: Remove type alias

   The type Status is erased during compilation.

2. Step 2: Remove parameter type annotation

   The constructor's public status: Status becomes status without type.

3. Step 3: Keep class and method code

   The class and method remain unchanged except for type removal.

4. Final Answer:

   class Response { constructor(status) { this.status = status; } print() { console.log(`Status: ${this.status}`); } } const res = new Response('success'); res.print(); -> Option C

5. Quick Check:

   Types removed, class code remains [OK]

Hint: Types vanish, classes and methods stay intact [OK]

Common Mistakes:

• Expecting type aliases in JS output
• Thinking constructor parameters keep types
• Assuming class code is removed