Generic function syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a generic function in TypeScript?

A generic function is a function that can work with any data type, allowing you to write flexible and reusable code by using type variables.

beginner

How do you declare a generic function in TypeScript?

You declare a generic function by adding a type parameter inside angle brackets <T> before the function's parameters, like:
function example<T>(arg: T): T { return arg; }

beginner

What does the <T> mean in a generic function?

The <T> is a placeholder for a type that will be specified when the function is called. It stands for 'Type' and can be replaced with any type like number, string, or a custom type.

intermediate

Can a generic function have multiple type parameters? Give an example.

Yes, a generic function can have multiple type parameters separated by commas, like:
function pair(first: T, second: U): [T, U] { return [first, second]; }

intermediate

Why use generic functions instead of using 'any' type?

Generic functions keep type safety by preserving the type information, while 'any' disables type checking and can lead to errors. Generics help catch mistakes during coding.

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

A A placeholder for a type to be specified later

B A variable name

C A function name

D A keyword to declare a constant

The is a type parameter that acts as a placeholder for any type specified when the function is called.

How do you declare a generic function that returns the same type as its argument?

A function example(arg: number): number { return arg; }

B function example(arg: any): any { return arg; }

C function example<T>(arg: T): T { return arg; }

D function example<T>(arg: number): T { return arg; }

Option C correctly declares a generic function with type parameter T that returns the same type as the argument.

Can a generic function have more than one type parameter?

A Yes, separated by commas inside <>

B No, only one type parameter is allowed

C Yes, but only if they are the same type

D No, you must use multiple functions instead

Generic functions can have multiple type parameters separated by commas, like .

What is the main advantage of using generic functions over 'any' type?

A They use less memory

B They run faster

C They allow any value without restrictions

D They keep type safety and help catch errors

Generics preserve type information, helping the compiler catch errors, unlike 'any' which disables type checking.

Which of the following is a valid generic function syntax in TypeScript?

A function identity(arg: T): T { return arg; }

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

C function identity<T>(arg): T { return arg; }

D function identity(arg): arg { return arg; }

Option B correctly declares a generic function with type parameter T and typed argument and return.

Explain how to write a generic function in TypeScript and why it is useful.

Think about how you can make a function work with different types without repeating code.

Describe the difference between using a generic type parameter and the 'any' type in a function.

Consider how TypeScript helps you avoid mistakes.

Practice

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

easy

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

B. A variable name for a function parameter

C. A special keyword to declare a constant

D. A syntax error in TypeScript

Solution

1. Step 1: Understand generic syntax

   The <T> syntax is used to declare a generic type parameter in TypeScript functions.

2. Step 2: Identify the role of T

   It acts as a placeholder for any type that will be provided when the function is called, making the function reusable for different types.

3. Final Answer:

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

4. Quick Check:

   Generic <T> = Type placeholder [OK]

Hint: Remember <T> means 'type to be decided' [OK]

Common Mistakes:

• Thinking T is a variable name
• Confusing <T> with a function argument
• Assuming <T> is a TypeScript keyword

2. Which of the following is the correct syntax to declare a generic function named identity that returns the same type it receives?

easy

A. function identity<T>(arg): T { return arg; }

B. function identity(arg: T): T { return arg; }

C. function identity<T>(arg: T): T { return arg; }

D. function identity<T>(arg: T): void { return arg; }

Solution

1. Step 1: Check generic declaration

   The generic type <T> must be declared before the function parameters.

2. Step 2: Verify parameter and return types

   The parameter arg should be of type T, and the function should return the same type T.

3. Final Answer:

   function identity<T>(arg: T): T { return arg; } -> Option C

4. Quick Check:

   Generic function syntax = function identity<T>(arg: T): T { return arg; } [OK]

Hint: Generic type <T> goes before parameters [OK]

Common Mistakes:

• Omitting <T> before parameters
• Not specifying type for arg
• Using void as return type incorrectly

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

function wrapInArray<T>(value: T): T[] { return [value]; }
const result = wrapInArray(5);
console.log(result);

medium

A. TypeError at runtime

B. 5

C. SyntaxError

D. [5]

Solution

1. Step 1: Understand function behavior

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

2. Step 2: Analyze the call with number 5

   Calling wrapInArray(5) returns an array with one element: [5].

3. Final Answer:

   [5] -> Option D

4. Quick Check:

   wrapInArray(5) = [5] [OK]

Hint: Generic returns array with input inside brackets [OK]

Common Mistakes:

• Expecting just the value without array
• Confusing output with error
• Misreading return type as void

4. Identify the error in this generic function declaration:

function getFirstElement<T>(arr: T): T {
  return arr[0];
}

medium

A. Parameter arr should be an array type T[], not T

B. Return type should be T[] instead of T

C. Generic type <T> is missing

D. Function should not use generics here

Solution

1. Step 1: Check parameter type

   The parameter arr is declared as type T, but the function tries to access arr[0], which requires arr to be an array.

2. Step 2: Correct parameter type

   To access the first element, arr should be of type T[] (array of T), not just T.

3. Final Answer:

   Parameter arr should be an array type T[], not T -> Option A

4. Quick Check:

   Array parameter needs T[] type [OK]

Hint: Array parameters need T[] type, not just T [OK]

Common Mistakes:

• Using T instead of T[] for arrays
• Returning wrong type
• Forgetting to declare generic <T>

5. You want to write a generic function mergeObjects that takes two objects of possibly different types and returns a new object combining both. Which is the correct syntax to declare this function?

hard

A. function mergeObjects(obj1: T, obj2: U): object { return {...obj1, ...obj2}; }

B. function mergeObjects(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; }

C. function mergeObjects(obj1: object, obj2: object): object { return {...obj1, ...obj2}; }

D. function mergeObjects<T>(obj1: T, obj2: T): T { return {...obj1, ...obj2}; }

Solution

1. Step 1: Understand the requirement

   The function should accept two objects of different types and return a combined object containing properties of both.

2. Step 2: Check generic parameters and return type

   Using two generic types T and U allows different input types. The return type T & U means an object with properties from both types.

3. Step 3: Verify function body

   The spread operator {...obj1, ...obj2} correctly merges the two objects.

4. Final Answer:

   function mergeObjects<T, U>(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; } -> Option B

5. Quick Check:

   Two generics + intersection return = function mergeObjects(obj1: T, obj2: U): T & U { return {...obj1, ...obj2}; } [OK]

Hint: Use two generics and return type intersection T & U [OK]

Common Mistakes:

• Using same generic type for both parameters
• Returning just object loses type info
• Not using intersection type for return