Migrating JavaScript to TypeScript - Time & Space Complexity

Time Complexity: Migrating JavaScript to TypeScript

O(n)

Understanding Time Complexity

When moving code from JavaScript to TypeScript, it's important to understand how the added type checks affect the program's speed.

We want to see how the program's running time changes as the input grows after migration.

Scenario Under Consideration

Analyze the time complexity of this TypeScript function that processes an array of numbers.

function sumPositiveNumbers(nums: number[]): number {
  let sum = 0;
  for (const num of nums) {
    if (num > 0) {
      sum += num;
    }
  }
  return sum;
}
    

This function adds up all positive numbers in the input array.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: A single loop that goes through each number in the array once.
• How many times: Exactly once for each element in the input array.

How Execution Grows With Input

As the input array gets bigger, the function checks each number once, so the work grows steadily.

Input Size (n)	Approx. Operations
10	About 10 checks and additions
100	About 100 checks and additions
1000	About 1000 checks and additions

Pattern observation: The number of operations grows directly with the input size.

Final Time Complexity

Time Complexity: O(n)

This means the time it takes grows in a straight line with the number of items.

Common Mistake

[X] Wrong: "Adding TypeScript types makes the code run slower because of extra checks at runtime."

[OK] Correct: TypeScript checks happen only during development and do not add runtime overhead, so the running time depends on the code logic, not the types.

Interview Connect

Understanding how adding types affects your code helps you write clear, maintainable programs without worrying about slowing them down.

Self-Check

"What if we changed the function to check pairs of numbers instead of single numbers? How would the time complexity change?"

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