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.

Practice

1. What is the main benefit of migrating JavaScript code to TypeScript?

easy

A. It adds type safety to catch errors early

B. It makes the code run faster in browsers

C. It removes all JavaScript features

D. It automatically converts code to Python

Solution

1. Step 1: Understand TypeScript's purpose

   TypeScript adds static types to JavaScript, helping find errors before running code.

2. Step 2: Compare options

   Only It adds type safety to catch errors early correctly states the benefit of type safety. Other options are incorrect or unrelated.

3. Final Answer:

   It adds type safety to catch errors early -> Option A

4. Quick Check:

   Type safety = D [OK]

Hint: TypeScript adds types to catch errors early [OK]

Common Mistakes:

• Thinking TypeScript makes code run faster
• Believing TypeScript removes JavaScript features
• Confusing TypeScript with other languages

2. Which of the following is the correct way to declare a typed variable in TypeScript?

easy

A. let age = number 30;

B. let age: number = 30;

C. let age = 30: number;

D. let age number = 30;

Solution

1. Step 1: Recall TypeScript variable syntax

   TypeScript uses let variableName: type = value; to declare typed variables.

2. Step 2: Check each option

   Only let age: number = 30; follows the correct syntax. Others have misplaced type or incorrect order.

3. Final Answer:

   let age: number = 30; -> Option B

4. Quick Check:

   Correct typed variable syntax = B [OK]

Hint: Use colon after variable name for type [OK]

Common Mistakes:

• Placing type after value
• Omitting colon between name and type
• Using wrong order of type and value

3. What will be the output of this TypeScript code after migration?

function greet(name: string) {
  return `Hello, ${name.toUpperCase()}!`;
}
console.log(greet("world"));

medium

A. TypeError at runtime

B. "Hello, world!"

C. "Hello, WORLD!"

D. SyntaxError during compilation

Solution

1. Step 1: Analyze the function behavior

   The function takes a string and returns a greeting with the name in uppercase.

2. Step 2: Evaluate the output of greet("world")

   Calling greet("world") returns "Hello, WORLD!" because toUpperCase() converts to uppercase.

3. Final Answer:

   "Hello, WORLD!" -> Option C

4. Quick Check:

   String uppercase greeting = C [OK]

Hint: Check string methods and template literals output [OK]

Common Mistakes:

• Ignoring toUpperCase effect
• Expecting original case output
• Confusing runtime and compile errors

4. Identify the error in this TypeScript migration:

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

medium

A. Parameter 'a' is missing a type annotation

B. Return type 'number' is invalid

C. Function name 'add' is not allowed

D. Parameters must not have types in TypeScript

Solution

1. Step 1: Check parameter types

   In TypeScript, all parameters should have type annotations for clarity and safety.

2. Step 2: Identify missing type

   Parameter 'a' lacks a type, causing a compile error. Other parts are correct.

3. Final Answer:

   Parameter 'a' is missing a type annotation -> Option A

4. Quick Check:

   All parameters need types = A [OK]

Hint: All function parameters need types in TypeScript [OK]

Common Mistakes:

• Leaving some parameters untyped
• Misunderstanding return type syntax
• Thinking function names have restrictions

5. You have this JavaScript object:

const user = { id: 1, name: "Alice", active: true };

How would you migrate it to TypeScript with a proper type annotation?

hard

A. const user: any = { id: 1, name: "Alice", active: true };

B. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true };

C. const user: object = { id: 1, name: "Alice", active: true };

D. const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true };

Solution

1. Step 1: Define precise object type

   Use an inline type annotation with exact property types for clarity and safety.

2. Step 2: Compare options

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; correctly annotates the object with property types. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true }; is invalid syntax. const user: object = { id: 1, name: "Alice", active: true }; is too generic. const user: any = { id: 1, name: "Alice", active: true }; disables type checking.

3. Final Answer:

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; -> Option D

4. Quick Check:

   Precise object type annotation = A [OK]

Hint: Use inline type with property names and types [OK]

Common Mistakes:

• Using 'any' which disables type safety
• Incorrect syntax for object type annotation
• Using generic 'object' type losing property info