Generic arrow functions in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a generic arrow function with array input

What is the output of this TypeScript code using a generic arrow function that returns the first element of an array?

Typescript

const firstElement = <T>(arr: T[]): T => arr[0];

console.log(firstElement([10, 20, 30]));

A Error at compile time

B 20

C 10

D undefined

💡 Hint

The function returns the first item of the array passed in.

The generic arrow function takes an array of any type and returns the first element. Here, the array is [10, 20, 30], so the first element is 10.

❓ Predict Output

intermediate

Output of generic arrow function with object type

What will this TypeScript code output when using a generic arrow function to get a property value from an object?

Typescript

const getProp = <T, K extends keyof T>(obj: T, key: K): T[K] => obj[key];

const person = { name: 'Alice', age: 30 };
console.log(getProp(person, 'name'));

A "Alice"

B 30

C undefined

D Type error at compile time

💡 Hint

The function returns the value of the given key from the object.

The generic function takes an object and a key, returning the value at that key. Here, 'name' is the key, so it returns 'Alice'.

🔧 Debug

advanced

Identify the error in this generic arrow function

This TypeScript generic arrow function is intended to swap two elements in a tuple. What error will it produce?

Typescript

const swap = <T, U>(pair: [T, U]): [U, T] => {
  return [pair[1], pair[0]];
};

const result = swap([true, 42]);
console.log(result);

A Type error: Cannot infer type parameters

B Syntax error: missing return type annotation

C Runtime error: undefined is not iterable

D No error, outputs [42, true]

💡 Hint

Check if the function correctly swaps tuple elements and returns the expected type.

The function correctly swaps the elements of the tuple and returns a tuple with types reversed. It compiles and runs fine, outputting [42, true].

📝 Syntax

advanced

Which option has correct syntax for a generic arrow function?

Which of the following is the correct syntax for a generic arrow function in TypeScript that returns the length of an array?

A const length = (arr: T[]) => arr.length;

B const length = <T>(arr: T[]) => arr.length;

C const length = <T>(arr: Array) => arr.length;

D const length = <T>(arr: T[]) => { arr.length }

💡 Hint

Generic type parameters must be declared before the function parameters.

Option B correctly declares a generic arrow function with type parameter T and parameter arr of type T[]. It returns arr.length. Other options have syntax errors or missing types.

🚀 Application

expert

Using generic arrow function to merge two objects

Given this generic arrow function to merge two objects, what is the type of the returned object when merging {a: 1} and {b: 'x'}?

Typescript

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

const merged = merge({ a: 1 }, { b: 'x' });

A { a: number; b: string; }

B { b: string; }

C { a: number; }

D Error: Cannot merge objects of different types

💡 Hint

The returned type combines properties from both input objects.

The generic function merges two objects and returns a new object with properties from both. The type is the intersection T & U, so it has both 'a' and 'b' properties with their respective types.