Generic arrow functions in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a generic arrow function in TypeScript?

A generic arrow function is a function written with arrow syntax that uses type parameters to work with different data types while keeping type safety.

beginner

How do you declare a generic arrow function with one type parameter <T>?

You write the function with <T> before the parameters, like: <br><code>const func = &lt;T&gt;(arg: T): T =&gt; arg;</code>

intermediate

Why use generic arrow functions instead of regular functions?

Generic arrow functions provide concise syntax and allow type flexibility with less code, making them easy to read and maintain.

beginner

What does this generic arrow function do?<br><code>const identity = &lt;T&gt;(value: T): T =&gt; value;</code>

It returns the same value it receives, keeping the type of the input and output the same.

intermediate

Can generic arrow functions have multiple type parameters? Give an example.

Yes, for example:<br><code>const pair = &lt;T, U&gt;(first: T, second: U): [T, U] =&gt; [first, second];</code>

How do you start declaring a generic arrow function with type parameter T?

A const func = <T>(arg: T) => arg;

B function func<T>(arg: T) { return arg; }

C const func = (arg: T) => arg;

D const func = (T) => arg;

Generic arrow functions use before the parameters to declare the type parameter.

What does the generic arrow function <T>(arg: T): T => arg; do?

A Throws an error.

B Converts the argument to string.

C Returns the argument with the same type.

D Returns a number always.

It returns the input argument without changing its type.

Can generic arrow functions have more than one type parameter?

A Yes, like <T, U>.

B No, only one type parameter is allowed.

C Only if you use function keyword.

D Only in classes.

Generic arrow functions can have multiple type parameters separated by commas.

Which of these is a valid generic arrow function syntax?

A const func = (arg: T) <T> => arg;

B const func = (T)<arg>: T => arg;

C const func = <T> arg: T => arg;

D const func = <T>(arg: T): T => arg;

Option D correctly places before the parameters and uses arrow syntax.

What is the main benefit of using generic arrow functions?

A They run faster than normal functions.

B They allow writing flexible, type-safe functions with concise syntax.

C They do not require type annotations.

D They only work with strings.

Generic arrow functions combine flexibility and type safety with short syntax.

Explain how to write a generic arrow function that returns the input value unchanged.

Think about how to declare <T> and use it in parameters and return type.

Describe the advantages of using generic arrow functions in TypeScript.

Consider why generics and arrow functions are useful together.

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