What survives compilation to JavaScript in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output after TypeScript compiles this code?

Consider this TypeScript code snippet. What will be the output when the compiled JavaScript runs?

Typescript

const num: number = 5;
function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet('Alice') + ' Number is ' + num);

A Hello, Alice! Number is undefined

B Compilation error due to type annotations

C Hello, Alice! Number is 5

D Hello, Alice! Number is num

💡 Hint

Type annotations are removed during compilation but variable values remain.

TypeScript removes type annotations during compilation. The variable 'num' and function 'greet' remain as normal JavaScript code, so the output is the concatenated string.

❓ Predict Output

intermediate

Which part of this TypeScript code is NOT present in the compiled JavaScript?

Look at this TypeScript code. After compilation, which part will NOT appear in the JavaScript output?

Typescript

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

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

A The interface Person

B The object user

C The console.log statement

D The property user.name

💡 Hint

Interfaces are only for type checking and do not exist at runtime.

Interfaces are removed during compilation because they are only used for type checking. The object and console.log remain in the JavaScript output.

❓ Predict Output

advanced

What will this compiled JavaScript output?

Given this TypeScript code, what will the compiled JavaScript output when run?

Typescript

enum Color {
  Red,
  Green,
  Blue
}

console.log(Color.Green);

A "Green"

B 1

C undefined

D Compilation error

💡 Hint

Enums are compiled into objects with numeric values starting at 0.

TypeScript compiles enums into JavaScript objects with numeric values starting at 0. Color.Green is 1.

❓ Predict Output

advanced

What error does this compiled JavaScript produce?

This TypeScript code uses a type assertion. What happens when the compiled JavaScript runs?

Typescript

const someValue: unknown = "hello";
const strLength: number = (someValue as string).length;
console.log(strLength);

A undefined

B TypeError at runtime

C Compilation error

D 5

💡 Hint

Type assertions do not exist in JavaScript and do not affect runtime behavior.

Type assertions are removed during compilation. The JavaScript code accesses the length property of a string, so it prints 5.

❓ Predict Output

expert

What is the output of this TypeScript code after compilation and execution?

This TypeScript code uses a generic function and a type parameter. What will the compiled JavaScript output when run?

Typescript

function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<number>(42));

A 42

B undefined

C Compilation error

D NaN

💡 Hint

Generics are removed during compilation and do not affect runtime.

Generics are erased during compilation. The function returns the argument as is, so the output is 42.