Lesson 4

Mastering TypeScript Sets: A Guide to Unique Collections

Understanding TypeScript Sets

Let's initiate our journey with Sets. In TypeScript, a Set is a unique type of object that stores diverse data types, be they primitive or object variables. A Set does not contain duplicates. Imagine a Set as a special bag holding unique treasures (elements), ensuring that each remains exclusive.

TypeScript
1let array : number[] = [1, 2, 2, 3, 3, 4]; 2 3// Set created from the array, removing duplicates. 4// Generic type <number> ensures the set contains elements of type number. 5let set = new Set<number>([1, 2, 2, 3, 3, 4]); 6 7console.log(array); // [1, 2, 2, 3, 3, 4] 8console.log(set); // Set(4) {1, 2, 3, 4}

The array houses duplicates, whereas the set displays only unique values.

Creating and Adding Elements in a Set with TypeScript Generics

In TypeScript, the creation of a Set leverages the new keyword alongside the Set() constructor. A distinctive feature of using Set in TypeScript is the ability to specify the type of elements it holds through generics. This is done by adding <type> next to Set, where type is the data type of the elements. This practice ensures type safety, allowing only elements of the specified type to be added to the Set.

TypeScript
1let universe = new Set<string>();

In the example above, <string> is a generic type parameter that specifies the type of elements the Set will contain. This means universe is a Set that can only contain string elements, ensuring type safety at compile-time.

To add elements to the Set, use the .add() method. Each element added to the Set is checked for uniqueness; duplicates are not allowed, ensuring each element is unique within the Set.

TypeScript
1universe.add('Asteroid'); 2universe.add('Star'); 3universe.add('Planet'); 4universe.add('Star'); // Attempt to add 'Star' again. 5console.log(universe); // Set(3) {"Asteroid", "Star", "Planet"}

In this example, although 'Star' is attempted to be added twice, the Set maintains it as a single entry, showcasing its inherent characteristic to prevent duplication. This behavior makes Set particularly useful for cases where the uniqueness of elements is a priority.

Removing Elements from a Set

To eliminate entries from a Set, use the .delete() method. If you wish to clear a Set completely, apply the .clear() method.

TypeScript
1universe.delete('Star'); 2console.log(universe); // Set(2) {"Asteroid", "Planet"} 3universe.clear(); 4console.log(universe); // Set(0) {}

The script above first eradicates Star from our Universe. Subsequently, the .clear() method entirely empties the Set, leaving it devoid of content.

Checking a Set's Size and Membership

We examine the size of a Set or its total entries using the size attribute. The .has() method checks whether an element is present in the Set.

TypeScript
1universe.add('Asteroid'); 2universe.add('Star'); 3universe.add('Planet'); 4universe.add('Moon'); 5 6console.log(universe.size); // 4 7console.log(universe.has('Star')); // true 8console.log(universe.has('Galaxy')); // false

In this script, our universe comprises four elements — two planets (Planet and Moon), one asteroid, and one star. Consequently, the size is 4. The .has() method finds 'Star' but does not locate 'Galaxy'.

Lesson Summary and Practice

Bravo, Explorer! You now understand Sets in TypeScript. We have covered the creation of Sets, the insertion and removal of elements, and how to check a Set's size and membership.

Now, apply your newly acquired skills in coding challenges to reinforce what you have learned. Are you ready to invoke your inner explorer? Go for it!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.