Multiple generic parameters in Typescript - Step-by-Step Execution

Concept Flow - Multiple generic parameters

Define function with <T, U>

↓

Call function with types

↓

Use T and U inside function

↓

Return or process values

↓

Output result with types applied

This flow shows how a function with two generic types is defined, called with specific types, and uses those types inside its body.

Execution Sample

Typescript

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

const result = pair<string, number>("hello", 42);
console.log(result);

This code defines a function with two generic types and returns a tuple of those types, then calls it with string and number.

Execution Table

Step	Action	T	U	first	second	Return Value	Output
1	Define function pair<T, U>	Generic T	Generic U	-	-	-	-
2	Call pair<string, number>("hello", 42)	string	number	"hello"	42	-	-
3	Inside function: return [first, second]	string	number	"hello"	42	["hello", 42]	-
4	Assign return to result	string	number	-	-	["hello", 42]	-
5	console.log(result)	-	-	-	-	-	["hello", 42]

💡 Function returns tuple ["hello", 42], printed to console, execution ends.

Variable Tracker

Variable	Start	After Call	After Return	Final
T	Generic	string	string	string
U	Generic	number	number	number
first	-	"hello"	"hello"	"hello"
second	-	42	42	42
result	-	-	["hello", 42]	["hello", 42]

Key Moments - 3 Insights

Why do we specify <string, number> when calling the function?

Specifying <string, number> tells TypeScript what types T and U should be for this call, as shown in execution_table step 2.

What does the function return type [T, U] mean?

It means the function returns a tuple where the first element is type T and the second is type U, as seen in step 3 and 4.

Can T and U be the same type?

Yes, T and U can be the same or different types; generics allow flexibility, but here they are string and number as per step 2.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what are the types assigned to T and U?

A T = any, U = any

B T = string, U = number

C T = number, U = string

D T = boolean, U = string

💡 Hint

Check the 'T' and 'U' columns in execution_table row for step 2.

At which step does the function return the tuple ["hello", 42]?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Return Value' column in execution_table.

If we called pair<number, number>(10, 20), how would the 'T' and 'U' columns change at step 2?

A T = number, U = number

B T = string, U = number

C T = number, U = string

D T = any, U = any

💡 Hint

Refer to how types are assigned in execution_table step 2 for the original call.

Concept Snapshot

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

- Use <T, U> to define multiple generic types
- Specify types when calling, e.g. pair<string, number>
- Function returns tuple with types [T, U]
- Allows flexible, type-safe code with multiple generics

Full Transcript

This example shows how to use multiple generic parameters in TypeScript. We define a function pair with two generics T and U. When calling the function, we specify the actual types, like string and number. Inside the function, these types are used to type the parameters and the return tuple. The execution table traces each step: defining the function, calling it with types, returning the tuple, and printing the result. Variables T and U change from generic placeholders to concrete types during the call. Key moments clarify why we specify types and what the return type means. The visual quiz tests understanding of type assignments and return values. This helps beginners see how multiple generics work step-by-step.