Lesson 3
Data Aggregation with TypeScript Maps
Topic Overview

Welcome! The focus of today's lesson is on data aggregation, a practical concept utilizing Maps as our primary tool. In TypeScript, we leverage its rich type system to ensure safer and more robust code.

Data aggregation refers to gathering "raw" data and subsequently presenting it in an analysis-friendly format. An illustrative analogy is viewing a cityscape from an airplane, providing an informative aerial overview rather than delving into the specifics of individual buildings. We will guide you through operations such as Sum, Average, Count, Maximum, and Minimum for practical, hands-on experience, using TypeScript's types for enhanced reliability and clarity.

Let's continue!

Summing Values in a Map

We will begin with a hands-on example using a fruit basket represented as a Map. First, create a new Map with type annotations and set the quantities of various fruits:

TypeScript
1const fruitBasket: Map<string, number> = new Map(); 2fruitBasket.set('apples', 5); 3fruitBasket.set('bananas', 4); 4fruitBasket.set('oranges', 8);

Next, sum the values in the Map. Start with a variable to hold the total number of fruits, explicitly typing it:

TypeScript
1let totalFruits: number = 0; 2for (const value of fruitBasket.values()) { 3 totalFruits += value; // Add each fruit quantity to the total 4}

Finally, print the total:

TypeScript
1console.log(`The total number of fruits in the basket is: ${totalFruits}`); 2// It outputs: "The total number of fruits in the basket is: 17"
Counting Elements in a Map

Counting the number of fruit types in our basket corresponds to counting the number of keys in our Map. Start by creating the Map again, with type annotations:

TypeScript
1const fruitBasket: Map<string, number> = new Map(); 2fruitBasket.set('apples', 5); 3fruitBasket.set('bananas', 4); 4fruitBasket.set('oranges', 8);

Then, count the elements using the size property:

TypeScript
1const countFruits: number = fruitBasket.size; // Number of keys in the Map 2console.log(`The number of fruit types in the basket is: ${countFruits}`); 3// It outputs: "The number of fruit types in the basket is: 3"
The Spread Operator

The spread operator (...) allows an iterable such as an array, string, or Map to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. It is useful for tasks such as copying or merging arrays, passing a variable number of arguments to functions, and working with Maps.

For instance, consider our fruit basket Map from earlier. You can use the spread operator to convert the Map's values into an array:

TypeScript
1const fruitQuantities: number[] = [...fruitBasket.values()]; 2console.log(fruitQuantities); 3// It outputs: [5, 4, 8]

Similarly, you can convert the keys into an array:

TypeScript
1const fruitTypes: string[] = [...fruitBasket.keys()]; 2console.log(fruitTypes); 3// It outputs: ['apples', 'bananas', 'oranges']
Maximum and Minimum Values in a Map

One directly applicable use case of the spread operator is finding the highest and lowest values in a Map. TypeScript allows us to use Math.max and Math.min with proper type definitions:

TypeScript
1const maxFruit: number = Math.max(...fruitBasket.values()); 2console.log(`The highest quantity of fruits is: ${maxFruit}`); 3// It outputs: "The highest quantity of fruits is: 8"

Similarly, you can find the minimum value using Math.min:

TypeScript
1const minFruit: number = Math.min(...fruitBasket.values()); 2console.log(`The lowest quantity of fruits is: ${minFruit}`); 3// It outputs: "The lowest quantity of fruits is: 4"
Averaging Values in a Map

To calculate the average number of each type of fruit, first sum the values as demonstrated previously, with type annotations:

TypeScript
1let totalFruits: number = 0; 2for (const value of fruitBasket.values()) { 3 totalFruits += value; 4}

Then, calculate the average by dividing the total quantity of fruits by the number of fruit types, again using type annotations:

TypeScript
1const averageFruits: number = totalFruits / fruitBasket.size; 2console.log(`The average number of each type of fruit in the basket is: ${averageFruits.toFixed(2)}`); 3// It outputs: "The average number of each type of fruit in the basket is: 5.67"
Conclusion

Congratulations on learning about data aggregation using TypeScript! You have mastered the Sum, Count, Max, Min, and Average operations. By ensuring that your code is type-safe, you've enhanced its reliability and readability. The skills you have acquired in data aggregation using Map are invaluable across a vast array of data analysis tasks, such as report generation and decision-making processes. TypeScript not only improves the robustness of your code but also facilitates earlier error detection during development. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.