Navigating TypeScript Maps: Typed Data Structures Deconstructed | CodeSignal Learn

Navigating TypeScript Maps: Typed Data Structures Deconstructed | CodeSignal Learn

Introduction to Simple Data Structures in TypeScript

Welcome! Are you ready to dive deep into simple data structures using TypeScript? To aid our journey, we'll explore the utility of TypeScript's Map, a key-value pair data structure that caters to a diverse range of data types.

Exploring TypeScript Maps

A TypeScript Map is an efficient repository of unique key-value pairs, mirroring JavaScript's Map feature. However, TypeScript enhances this feature by enforcing types for keys and values. Generics in TypeScript are used to create a Map to specify the types of keys and values it will hold, ensuring type safety. This way, the compiler can check that all keys and values added to the map are of the correct type. Here's how we create and populate a Map in TypeScript: TypeScript let planets = new Map<string, string>(); // Initialize a new Map with string types for both keys and values planets.set('Earth', 'Blue Planet'); // Add entries to the map planets.set('Mars', 'Red Planet'); console.log(planets); // Logs: Map(2) {"Earth" => "Blue Planet", "Mars" => "Red Planet"}

Enhancing Flexibility with Union Types

In real-world scenarios, you might need a Map to be more flexible. For instance, what if some celestial bodies are identified by their name (a string) and others by a catalog ID (a number)? In TypeScript, you can use Union Types with the pipe (|) symbol to allow multiple types for keys or values: TypeScript // This Map accepts either a string OR a number as a key let cosmicRegistry = new Map<string | number, string>(); cosmicRegistry.set('Saturn', 'Ringed Planet'); // String key cosmicRegistry.set(101, 'Unknown Asteroid'); // Number key console.log(cosmicRegistry.get(101)); // Logs: Unknown Asteroid Using union types like string | number allows you to handle diverse data while still maintaining strict type safety over which types are allowed.

Utilizing Built-In Map Methods

In addition to the set method seen earlier, Maps in TypeScript offer a host of essential methods such as get, delete, and the has method, all serving as proof of a robust data management system. TypeScript console.log(planets.get('Earth')); // Logs: Blue Planet console.log(planets.has('Mars')); // Logs: true planets.delete('Mars'); // Deletes the 'Mars' entry from our Map console.log(planets.has('Mars')); // Logs: false

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Managing Default Values in Maps

Attempting to get a key that doesn't exist in the Map will return undefined . However, you can leverage the ternary operator to deliver a default value in these scenarios: let planetName = 'Venus'; console.log(planets.has(planetName) ? planets.get(planetName) : 'Planet not cataloged'); // Outputs: Planet not cataloged

Advantage of Maps over Objects in TypeScript

TypeScript Map s have a significant advantage over traditional JavaScript objects due to their ability to use any type of keys (including objects) while maintaining the order of insertion. Here's how an object can operate as a key in a TypeScript Map : let planetMap = new Map<object, string>(); // Create a Map let mars = {name: 'Mars'}; // Define an object planetMap.set(mars, 'Fourth planet from the Sun'); // Set this object as a key in our Map console.log(planetMap.get(mars)); // Logs: Fourth planet from the Sun

TypeScript

let planetMap = new Map<object, string>();  // Create a Map
let mars = {name: 'Mars'}; // Define an object
planetMap.set(mars, 'Fourth planet from the Sun'); // Set this object as a key in our Map
console.log(planetMap.get(mars)); // Logs: Fourth planet from the Sun