Generic function syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic identity function

What is the output of this TypeScript code when calling identity(42)?

Typescript

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

console.log(identity(42));

A undefined

B "42"

C 42

D TypeError

💡 Hint

The function returns exactly what it receives.

The generic function identity returns the argument it receives without changes. Passing 42 returns 42.

❓ Predict Output

intermediate

Output of generic function with array argument

What will this code print to the console?

Typescript

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

console.log(firstElement(['apple', 'banana', 'cherry']));

A "banana"

B "apple"

C undefined

D TypeError

💡 Hint

The function returns the first item of the array.

The generic function returns the first element of the array passed. The first element is "apple".

❓ Predict Output

advanced

Output of generic function with multiple type parameters

What is the output of this code?

Typescript

function pairToString<K, V>(key: K, value: V): string {
  return `${key}: ${value}`;
}

console.log(pairToString<number, string>(1, "one"));

A "1: one"

B "one: 1"

C "[object Object]: one"

D TypeError

💡 Hint

The function formats key and value as a string separated by a colon.

The function returns a string combining the key and value separated by ': '. The key is 1 and value is "one".

❓ Predict Output

advanced

Output of generic function with constraints

What will this code output?

Typescript

interface Lengthwise {
  length: number;
}

function loggingLength<T extends Lengthwise>(arg: T): number {
  return arg.length;
}

console.log(loggingLength('hello'));

A 5

B "hello"

C TypeError

D undefined

💡 Hint

Strings have a length property.

The generic function requires the argument to have a length property. The string "hello" has length 5.

🧠 Conceptual

expert

Type inference in generic functions

Given the generic function function wrap(value: T): { value: T }, what is the inferred type of T when calling wrap([1, 2, 3])?

A unknown

B number

C any[]

D number[]

💡 Hint

The type parameter matches the argument's type exactly.

The argument is an array of numbers, so TypeScript infers T as number[].

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