Generic functions with arrays in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a generic function that returns the first element of an array.

Typescript

function firstElement<[1]>(arr: [1][]): [1] {
  return arr[0];
}

Drag options to blanks, or click blank then click option'

AT

BK

CV

DU

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lowercase letter for the generic type parameter.

Using different type parameters for the array and return type.

The generic type parameter T is commonly used to represent any type. Here, it allows the function to accept an array of any type and return an element of that same type.

2fill in blank

medium

Complete the code to create a generic function that returns the length of any array.

Typescript

function getLength<[1]>(items: [1][]): number {
  return items.length;
}

Drag options to blanks, or click blank then click option'

AU

BY

CX

DT

Attempts:

3 left

💡 Hint

Common Mistakes

Using a generic type parameter that does not match the array element type.

Forgetting to specify the generic type parameter in the function signature.

The generic type parameter T is used here to represent the type of elements in the array. The function returns the length of the array regardless of element type.

3fill in blank

hard

Fix the error in the generic function that swaps the first and last elements of an array.

Typescript

function swapFirstLast<[1]>(arr: [1][]): [1][] {
  const temp = arr[0];
  arr[0] = arr[arr.length - 1];
  arr[arr.length - 1] = temp;
  return arr;
}

Drag options to blanks, or click blank then click option'

AV

BU

CT

DW

Attempts:

3 left

💡 Hint

Common Mistakes

Using different generic type parameters in the function signature and parameter.

Not declaring the generic type parameter at all.

The generic type parameter T is used consistently to indicate the type of elements in the array. This ensures the function works for any array type.

4fill in blank

hard

Fill both blanks to create a generic function that filters an array based on a condition.

Typescript

function filterArray<[1]>(arr: [1][], predicate: (item: [2]) => boolean): [1][] {
  return arr.filter(predicate);
}

Drag options to blanks, or click blank then click option'

AT

BU

DV

Attempts:

3 left

💡 Hint

Common Mistakes

Using different generic type parameters for the array and predicate argument.

Not using a generic type parameter at all.

The generic type parameter T is used for both the array element type and the predicate function parameter to ensure type consistency.

5fill in blank

hard

Fill all three blanks to create a generic function that maps an array to another array using a transform function.

Typescript

function mapArray<[1] , [2]>(arr: [1][], transform: (item: [3]) => [2]): [2][] {
  return arr.map(transform);
}

Drag options to blanks, or click blank then click option'

AT

BU

DV

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same generic type parameter for input and output types.

Not declaring both generic type parameters.

The generic type parameters T and U represent the input and output types respectively. The function uses these to type the array and transform function correctly.

Practice

1.

What is the main purpose of using a generic function with <T> in TypeScript when working with arrays?

easy

A. To allow the function to work with arrays of any type without rewriting code.

B. To restrict the function to only work with number arrays.

C. To convert all array elements to strings.

D. To make the function run faster by using a specific type.

Solution

1. Step 1: Understand generic type <T>

   The generic type <T> allows a function to accept any type, making it reusable for different data types.

2. Step 2: Apply to arrays

   Using <T> with arrays means the function can handle arrays of numbers, strings, or any other type without rewriting the function.

3. Final Answer:

   To allow the function to work with arrays of any type without rewriting code. -> Option A

4. Quick Check:

   Generic <T> = reusable for any type [OK]

Hint: Generic <T> means any type works [OK]

Common Mistakes:

• Thinking generic restricts to one type
• Assuming generic converts types
• Believing generic improves speed only

2.

Which of the following is the correct syntax to declare a generic function firstElement that returns the first element of an array of any type?

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

easy

A. arr: T[]

B. <T> arr: T[]

C. <T>(arr: T[])

D. (arr: any[])

Solution

1. Step 1: Identify generic function syntax

   Generic functions declare the type parameter before the argument list, like function fnName<T>(args).

2. Step 2: Match syntax to example

   The correct syntax is function firstElement<T>(arr: T[]): T | undefined to accept an array of type T.

3. Final Answer:

   <T>(arr: T[]) -> Option C

4. Quick Check:

   Generic syntax = <T>(args) [OK]

Hint: Generic type goes before parameters in function [OK]

Common Mistakes:

• Placing <T> after parameters
• Omitting <T> entirely
• Using incorrect parameter types

3.

What will be the output of the following TypeScript code?

function getLastElement<T>(arr: T[]): T | undefined {
  return arr.length ? arr[arr.length - 1] : undefined;
}

const nums = [10, 20, 30];
const result = getLastElement(nums);
console.log(result);

medium

A. 30

B. 10

C. undefined

D. Error

Solution

1. Step 1: Understand function behavior

   The function returns the last element if the array is not empty; otherwise, it returns undefined.

2. Step 2: Apply to given array

   The array nums is [10, 20, 30], so the last element is 30, which is returned and logged.

3. Final Answer:

   30 -> Option A

4. Quick Check:

   Last element of [10,20,30] = 30 [OK]

Hint: Last element is at index length-1 [OK]

Common Mistakes:

• Returning first element instead
• Ignoring empty array case
• Expecting error due to generics

4.

Identify the error in this generic function and select the corrected version:

function wrapInArray<T>(item: T): T[] {
  return item;
}

medium

A. Remove generic <T> since it's not needed.

B. Change return to [item] to return an array containing the item.

C. Change parameter type to T[] to match return type.

D. Change return type to T instead of T[].

Solution

1. Step 1: Analyze function return type

   The function promises to return an array of type T[], but returns item which is type T, not an array.

2. Step 2: Fix return statement

   Wrapping item in square brackets [item] creates an array containing the item, matching the return type.

3. Final Answer:

   Change return to [item] to return an array containing the item. -> Option B

4. Quick Check:

   Return array by wrapping item in [] [OK]

Hint: Return arrays with brackets [] around item [OK]

Common Mistakes:

• Returning item directly instead of array
• Changing parameter type unnecessarily
• Removing generics without reason

5.

You want to create a generic function filterNonEmpty that takes an array of any type T and returns a new array excluding null and undefined values. Which implementation correctly uses generics and array filtering?

hard

A. function filterNonEmpty<T>(arr: T[]): T[] {
return arr.filter(item => item != null);
}

B. function filterNonEmpty(arr: T[]): T[] {
return arr.filter(item => item !== null && item !== undefined);
}

C. function filterNonEmpty<T>(arr: T[]): (T | null | undefined)[] {
return arr.filter(item => item != null);
}

D. function filterNonEmpty<T>(arr: (T | null | undefined)[]): T[] {
return arr.filter(item => item != null);
}

Solution

1. Step 1: Define input and output types

   The input array can contain T, null, or undefined, so its type is (T | null | undefined)[]. The output should be only T[].

2. Step 2: Filter out null and undefined

   Using filter(item => item != null) removes both null and undefined values safely.

3. Final Answer:

   function filterNonEmpty<T>(arr: (T | null | undefined)[]): T[] { return arr.filter(item => item != null); } -> Option D

4. Quick Check:

   Filter null/undefined from mixed array [OK]

Hint: Input type includes null/undefined, output excludes them [OK]

Common Mistakes:

• Not typing input to include null/undefined
• Returning wrong output type
• Using strict !== null only, missing undefined