Generic functions with arrays in Typescript - Mini Project: Build & Apply

Generic functions with arrays

📖 Scenario: You are building a small utility to work with lists of items. You want to create a generic function that can take an array of any type and return the first item. This helps you avoid writing the same code for different types of arrays.

🎯 Goal: Create a generic function called getFirstItem that takes an array of any type and returns the first element. Then test it with arrays of numbers and strings.

📋 What You'll Learn

Create a generic function called getFirstItem with a type parameter T.

The function should accept one parameter called items which is an array of type T.

The function should return the first element of the items array.

Create a variable numbers with the array [10, 20, 30].

Create a variable words with the array ["apple", "banana", "cherry"].

Call getFirstItem with numbers and print the result.

Call getFirstItem with words and print the result.

💡 Why This Matters

🌍 Real World

Generic functions are used in many programs to handle data of different types without repeating code. For example, utility libraries use generics to work with arrays, lists, or collections.

💼 Career

Understanding generics is important for TypeScript developers because it helps write flexible and safe code, which is highly valued in software development jobs.

1

Create arrays of numbers and strings

Create a variable called numbers and set it to the array [10, 20, 30]. Then create a variable called words and set it to the array ["apple", "banana", "cherry"].

Typescript

// Create the 'numbers' and 'words' arrays
// Your code here

Hint

Use const to create the arrays exactly as shown.

2

Create a generic function called getFirstItem

Create a generic function called getFirstItem with a type parameter T. It should take one parameter called items which is an array of type T. The function should return the first element of the items array.

Typescript

const numbers = [10, 20, 30];
const words = ["apple", "banana", "cherry"];

// Create the generic function 'getFirstItem' below
// Your code here

Hint

Use function getFirstItem<T>(items: T[]): T and return the first item with items[0].

3

Call getFirstItem with arrays

Call getFirstItem with the numbers array and store the result in a variable called firstNumber. Then call getFirstItem with the words array and store the result in a variable called firstWord.

Typescript

const numbers = [10, 20, 30];
const words = ["apple", "banana", "cherry"];

function getFirstItem(items: T[]): T {
    return items[0];
}

// Call getFirstItem with numbers and words arrays
// Your code here

Hint

Store the results in firstNumber and firstWord variables.

4

Print the results

Print the value of firstNumber and firstWord using console.log.

Typescript

const numbers = [10, 20, 30];
const words = ["apple", "banana", "cherry"];

function getFirstItem(items: T[]): T {
    return items[0];
}

const firstNumber = getFirstItem(numbers);
const firstWord = getFirstItem(words);

// Print firstNumber and firstWord
// Your code here

Hint

Use console.log(firstNumber) and console.log(firstWord) to print the results.

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