Migrating JavaScript to TypeScript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output after adding types?

Consider this JavaScript function migrated to TypeScript with types added. What will be the output when calling greet('Alice')?

Typescript

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

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

A TypeError at runtime

B Hello, undefined!

C Hello, Alice!

D Compilation error due to missing return type

💡 Hint

Check how the function uses the typed parameter and returns a string.

The function greet takes a string parameter and returns a greeting string. The output is the greeting with the name inserted.

❓ Predict Output

intermediate

What error occurs with missing type annotations?

Given this TypeScript code, what error will the compiler show?

Typescript

function add(a, b) {
  return a + b;
}

const result: number = add(5, '10');

A Type 'string' is not assignable to type 'number'

B No error, result is 15

C Type 'number' is not assignable to type 'string'

D Runtime error: cannot add number and string

💡 Hint

Look at the types of arguments passed and the expected return type.

The function parameters have no types, so TypeScript infers them as any. But assigning the result to a number type causes an error because 'b' is a string.

🔧 Debug

advanced

Why does this TypeScript code cause a compilation error?

This JavaScript code was migrated to TypeScript but now causes an error. What is the cause?

Typescript

const user = {
  name: 'Bob',
  age: 30
};

function printUser(user: { name: string; age?: number }) {
  console.log(user.name.toUpperCase());
  console.log(user.age.toFixed(2));
}

printUser(user);

A Function printUser has incorrect parameter type

B Property 'name' is missing a type annotation

C Object 'user' is missing the 'age' property

D Property 'age' might be undefined, so calling toFixed causes an error

💡 Hint

Check optional properties and method calls on possibly undefined values.

The 'age' property is optional, so it might be undefined. Calling toFixed on undefined causes a compilation error.

🧠 Conceptual

advanced

Which TypeScript feature helps migrate dynamic JavaScript objects safely?

When migrating JavaScript code that uses dynamic objects, which TypeScript feature helps ensure type safety while allowing flexible object shapes?

A Index signatures

B Union types

C Type assertions (casting)

D Enums

💡 Hint

Think about how to type objects with unknown keys but known value types.

Index signatures allow typing objects with unknown property names but consistent value types, useful for dynamic objects.

❓ Predict Output

expert

What is the output of this TypeScript code using discriminated unions?

Consider this TypeScript code using discriminated unions. What will it print?

Typescript

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'square'; sideLength: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.sideLength ** 2;
  }
}

console.log(area({ kind: 'circle', radius: 3 }).toFixed(2));

A 9

B 28.27

C NaN

D Compilation error: missing return in switch

💡 Hint

Calculate the area of a circle with radius 3 and format to 2 decimals.

The area of a circle is π * r² = 3.14159 * 9 ≈ 28.27. The code returns this value and formats it to 2 decimals.