Generic arrow functions in Typescript - Step-by-Step Execution

Concept Flow - Generic arrow functions

Start: Define generic arrow function

↓

Call function with type argument

↓

Function uses generic type

↓

Return value of generic type

↓

Use returned value

This flow shows how a generic arrow function is defined, called with a type, uses that type inside, and returns a value of that type.

Execution Sample

Typescript

const identity = <T>(arg: T): T => arg;
const result = identity<string>("hello");
console.log(result);

Defines a generic arrow function that returns its argument, then calls it with a string and prints the result.

Execution Table

Step	Action	Type Parameter T	Argument arg	Return Value	Output
1	Define generic arrow function identity	T (generic)	N/A	N/A	N/A
2	Call identity with T=string and arg="hello"	string	"hello"	Returns "hello"	N/A
3	Assign return value to result	string	"hello"	"hello"	N/A
4	Print result	string	"hello"	"hello"	Prints: hello

💡 Function call completes and output is printed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
identity	generic arrow function	unchanged	unchanged	unchanged
result	undefined	undefined	"hello"	"hello"

Key Moments - 3 Insights

Why do we write <T> before the function parameters?

The <T> declares a generic type parameter so the function can work with any type. See execution_table step 1 where identity is defined with <T>.

How does the function know what type T is when called?

When calling identity<string>("hello"), we specify T as string explicitly. See execution_table step 2 where T is string.

What type does the function return?

It returns the same type T as the argument. In this example, it returns a string. See execution_table step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the type of T when identity is called?

A string

B number

C boolean

D any

💡 Hint

Check execution_table row 2 under 'Type Parameter T'

At which step is the variable 'result' assigned the returned value?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table rows and see when 'result' gets the return value

If we called identity<number>(42) instead, what would change in the execution table?

A Return value would be a string

B Type Parameter T would be number and argument would be 42

C Output would be undefined

D Function definition would change

💡 Hint

Think about how the generic type and argument relate in execution_table row 2

Concept Snapshot

Generic arrow functions use <T> to accept any type.
Syntax: const func = <T>(arg: T): T => arg;
Call with type: func<string>("text");
Returns the same type as input.
Useful for reusable, type-safe code.

Full Transcript

This example shows a generic arrow function in TypeScript named identity. It uses a generic type parameter T declared before the function parameters. When called, we specify the type T explicitly, for example string. The function takes an argument of type T and returns the same value. The execution table traces defining the function, calling it with a string, assigning the return value to result, and printing it. The variable tracker shows how result changes from undefined to the string "hello". Key moments clarify why <T> is needed, how the type is set on call, and what type is returned. The quiz tests understanding of the generic type usage and variable assignment steps. The snapshot summarizes syntax and behavior for quick reference.