Callback function types in Typescript - Time & Space Complexity

Time Complexity: Callback function types

O(n)

Understanding Time Complexity

When using callback functions, it is important to know how the program's running time changes as the input grows.

We want to see how many times the callback runs and how that affects overall speed.

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

function processItems(items: number[], callback: (item: number) => void): void {
  for (const item of items) {
    callback(item);
  }
}

const numbers = [1, 2, 3, 4, 5];
processItems(numbers, (num) => console.log(num * 2));
    

This code runs a callback on each item in an array, doing something with each number.

Identify Repeating Operations

• Primary operation: The for-loop that goes through each item in the array.
• How many times: Once for every item in the input array.

How Execution Grows With Input

As the number of items grows, the callback runs more times, so the total work grows too.

Input Size (n)	Approx. Operations
10	10 callback calls
100	100 callback calls
1000	1000 callback calls

Pattern observation: The work grows directly with the number of items, doubling the items doubles the work.

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: "The callback runs only once, so time is constant."

[OK] Correct: The callback runs once for each item, so more items mean more calls and more time.

Interview Connect

Understanding how callbacks affect time helps you explain your code clearly and shows you know how programs scale.

Self-Check

"What if the callback itself contains a loop over the entire array? How would the time complexity change?"

Practice

1. What does a callback function type in TypeScript specify?

easy

A. The input parameters and return type of the callback function

B. The variable names used inside the callback function

C. The order in which functions are called

D. The number of times a function is called

Solution

1. Step 1: Understand callback function types

   A callback function type defines what inputs (parameters) the callback expects and what it returns.

2. Step 2: Identify what is specified

   It does not specify variable names, call order, or call count, only input and output types.

3. Final Answer:

   The input parameters and return type of the callback function -> Option A

4. Quick Check:

   Callback type = inputs and output [OK]

Hint: Callback types describe inputs and outputs only [OK]

Common Mistakes:

• Confusing callback type with variable names
• Thinking callback type controls call order
• Assuming callback type limits call count

2. Which of the following is the correct TypeScript syntax to declare a callback type that takes a number and returns void?

easy

A. type Callback = (input: number) => void;

B. type Callback = (number) => void;

C. type Callback = (input: number) => number;

D. type Callback = void (input: number);

Solution

1. Step 1: Check correct syntax for callback type

   In TypeScript, a function type is declared as (parameters) => returnType. Parameters must have names and types.

2. Step 2: Match the correct option

   type Callback = (input: number) => void; correctly declares a function taking a number named 'input' and returning void.

3. Final Answer:

   type Callback = (input: number) => void; -> Option A

4. Quick Check:

   Correct syntax = type Callback = (input: number) => void; [OK]

Hint: Use (param: type) => returnType syntax [OK]

Common Mistakes:

• Omitting parameter name
• Wrong return type
• Incorrect arrow function syntax

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

type Callback = (x: number) => number;
function applyCallback(n: number, cb: Callback) {
  return cb(n) + 1;
}
const result = applyCallback(5, x => x * 2);
console.log(result);

medium

A. 10

B. 11

C. 6

D. Error

Solution

1. Step 1: Understand the callback and function call

   The callback multiplies input by 2. applyCallback calls cb(5), which is 5*2=10, then adds 1.

2. Step 2: Calculate the final result

   10 + 1 = 11, so console.log prints 11.

3. Final Answer:

   11 -> Option B

4. Quick Check:

   5*2+1 = 11 [OK]

Hint: Calculate callback result then add 1 [OK]

Common Mistakes:

• Forgetting to add 1 after callback
• Confusing callback return with input
• Assuming callback returns void

4. Identify the error in this TypeScript code snippet:

type Callback = (msg: string) => void;
function greet(cb: Callback) {
  cb(123);
}

medium

A. Function greet should not accept a callback

B. Callback should return a number, not void

C. Callback expects a string, but a number is passed

D. No error, code is correct

Solution

1. Step 1: Check callback type and usage

   Callback expects a string parameter, but greet calls cb with 123 (a number).

2. Step 2: Identify type mismatch error

   Passing a number where a string is expected causes a type error.

3. Final Answer:

   Callback expects a string, but a number is passed -> Option C

4. Quick Check:

   Type mismatch in callback argument [OK]

Hint: Match callback parameter types exactly [OK]

Common Mistakes:

• Passing wrong argument type to callback
• Ignoring callback return type
• Assuming no error on type mismatch

5. You want to create a function processItems that takes an array of numbers and a callback. The callback should receive each number and return a string.
Which is the correct callback type and function signature to ensure type safety?

hard

A. type Callback = (item: string) => number;
function processItems(items: string[], cb: Callback): number[];

B. type Callback = () => string;
function processItems(items: number[], cb: Callback): string[];

C. type Callback = (item: number) => void;
function processItems(items: number[], cb: Callback): void;

D. type Callback = (item: number) => string;
function processItems(items: number[], cb: Callback): string[];

Solution

1. Step 1: Define callback input and output types

   The callback should take a number and return a string, so type Callback = (item: number) => string.

2. Step 2: Define function signature matching callback and array

   processItems takes number[] and callback, returns string[] because it maps numbers to strings.

3. Final Answer:

   type Callback = (item: number) => string; function processItems(items: number[], cb: Callback): string[]; -> Option D

4. Quick Check:

   Callback input number, output string [OK]

Hint: Match callback input/output with function parameters/return [OK]

Common Mistakes:

• Mismatching callback parameter types
• Wrong return type in callback or function
• Ignoring array element types