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.

Practice

1.

What does the <T> represent in a generic arrow function in TypeScript?

easy

A. A variable name for a function parameter

B. A placeholder for a type that will be specified later

C. A keyword to declare a constant

D. A special operator for comparison

Solution

1. Step 1: Understand generic type parameters

   The <T> syntax declares a generic type parameter, which acts as a placeholder for any type.

2. Step 2: Recognize its purpose in functions

   This allows the function to work with different types while keeping type safety.

3. Final Answer:

   A placeholder for a type that will be specified later -> Option B

4. Quick Check:

   Generic type parameter = placeholder type [OK]

Hint: Think of <T> as a flexible type placeholder [OK]

Common Mistakes:

• Confusing <T> with a variable name
• Thinking <T> is a keyword like const or let
• Assuming <T> is an operator

2.

Which of the following is the correct syntax for a generic arrow function that returns the same type it receives?

?

easy

A. const identity = <T> = (arg: T): T => arg;

B. const identity = <T>: (arg: T) => T => arg;

C. const identity = <T>(arg: T): T => arg;

D. const identity = <T> (arg: T) => { return arg; };

Solution

1. Step 1: Check generic arrow function syntax

   The generic type parameter <T> must come immediately after the function name without an equals sign.

2. Step 2: Verify arrow function structure

   The function takes an argument of type T and returns the same type T. const identity = <T>(arg: T): T => arg; matches this syntax correctly.

3. Final Answer:

   const identity = <T>(arg: T): T => arg; -> Option C

4. Quick Check:

   Correct generic arrow function syntax = const identity = <T>(arg: T): T => arg; [OK]

Hint: Generic syntax: const fn = <T>(arg: T): T => ... [OK]

Common Mistakes:

• Adding an equals sign after <T>
• Misplacing parentheses around <T>
• Using incorrect arrow function syntax

3.

What will be the output of this TypeScript code?

const wrapInArray = <T>(value: T): T[] => [value];

console.log(wrapInArray(5));
console.log(wrapInArray('hello'));

medium

A. [5]
['hello']

B. 5
hello

C. [5, 'hello']

D. Error: Type mismatch

Solution

1. Step 1: Understand the generic function behavior

   The function wrapInArray takes a value of any type T and returns an array containing that value.

2. Step 2: Analyze the console.log outputs

   Calling wrapInArray(5) returns [5], and wrapInArray('hello') returns ['hello'].

3. Final Answer:

   [5] ['hello'] -> Option A

4. Quick Check:

   Generic function returns array with input value [OK]

Hint: Generic function wraps input in array, output matches input type [OK]

Common Mistakes:

• Expecting output without array brackets
• Thinking it returns a tuple
• Confusing types causing errors

4.

Identify the error in this generic arrow function and choose the corrected version:

const getFirst = <T> = (arr: T[]): T => {
  return arr[0];
};

medium

A. const getFirst = <T> (arr: T[]): T => { return arr[0]; };

B. const getFirst = (arr: T[]): T => arr[0];

C. const getFirst = <T>: (arr: T[]) => T => arr[0];

D. const getFirst = <T>(arr: T[]): T => arr[0];

Solution

1. Step 1: Identify incorrect syntax in original code

   The original code incorrectly uses an equals sign after <T>, which is not valid syntax for generic arrow functions.

2. Step 2: Choose the correct syntax

   const getFirst = <T>(arr: T[]): T => arr[0]; correctly places <T> immediately after the function name without an equals sign and uses concise arrow function syntax.

3. Final Answer:

   const getFirst = <T>(arr: T[]): T => arr[0]; -> Option D

4. Quick Check:

   Generic arrow function syntax = const getFirst = <T>(arr: T[]): T => arr[0]; [OK]

Hint: No equals sign after <T> in generic arrow functions [OK]

Common Mistakes:

• Adding equals sign after <T>
• Omitting generic parameter <T>
• Incorrect arrow function syntax

5.

Given this generic arrow function, what is the output of mergeObjects({a: 1}, {b: 2})?

const mergeObjects = <T, U>(obj1: T, obj2: U): T & U => ({ ...obj1, ...obj2 });

console.log(mergeObjects({a: 1}, {b: 2}));

hard

A. { a: 1, b: 2 }

B. { a: 1 }

C. { b: 2 }

D. TypeError at runtime

Solution

1. Step 1: Understand the generic parameters and return type

   The function takes two objects of types T and U and returns their intersection type T & U, meaning it combines properties from both.

2. Step 2: Analyze the spread operator usage

   The spread operator merges properties from both objects into a new object containing all keys and values.

3. Step 3: Predict the output of the console.log

   Calling mergeObjects({a: 1}, {b: 2}) returns { a: 1, b: 2 }.

4. Final Answer:

   { a: 1, b: 2 } -> Option A

5. Quick Check:

   Spread merge of two objects = combined object [OK]

Hint: Spread operator merges objects, output has all keys [OK]

Common Mistakes:

• Expecting only first or second object properties
• Confusing intersection type with union
• Thinking it causes runtime error