Maps in TypeScript

In TypeScript, "maps" can refer to the Map object—a collection of keyed data items, similar to dictionaries in other programming languages—or to the .map() method, which is a powerful array transformation tool.

This guide will explore the various aspects of using both the Map type and the .map() function in TypeScript.

The Map object in TypeScript

Introduction to TypeScript Map

The Map object in TypeScript holds key-value pairs and stores the original insertion order of the keys. Each key in a Map can only occur once; it is unique in the Map's collection.

Creating and initializing a Map

To create a Map in TypeScript, you can instantiate it using the new Map() syntax. You can optionally pass an array of key-value pairs (an array of arrays) to initialize the Map.

let myMap = new Map<string, number>([
  ['key1', 1],
  ['key2', 2]
])

In this example, myMap is a Map where keys are strings and values are numbers.

Working with Map

The Map object provides several methods and properties that can be used to manipulate its contents:

• set(key, value): Adds or updates an element with a specified key and value.
• get(key): Retrieves the value associated with a specified key.
• has(key): Returns a Boolean indicating whether an element with the specified key exists.
• delete(key): Removes an element specified by the key.
• clear(): Removes all elements from the Map.
• size: Returns the number of elements in the Map.

map.set('key3', 3)
console.log(map.get('key1')) // Output: 1
console.log(map.has('key2')) // Output: true
map.delete('key2')
console.log(map.size) // Output: 2

The .map() method in TypeScript

Understanding .map() in TypeScript

The .map() method creates a new array populated with the results of calling a provided function on every element in the specified array. It is a method available on all instances of TypeScript arrays and is used for transforming data.

Syntax of .map()

The .map() method takes a callback function as its argument, which is executed once for each element in the array. The callback function is typically defined with parameters that represent the element value, element index, and the array itself, though only the value is required.

let numbers = [1, 2, 3, 4]
let squares = numbers.map((x) => x * x)
console.log(squares) // Output: [1, 4, 9, 16]

In this example, .map() is used to square each number in the numbers array.

Using .map() with TypeScript type annotations

TypeScript allows you to specify types for the parameters in the .map() callback function, enhancing type safety and predictability of your code.

let numbers: number[] = [1, 2, 3, 4]
let squares: number[] = numbers.map((x: number): number => x * x)

Here, both the array and the function parameters are explicitly typed as numbers.

Use cases and applications

Mapping objects in TypeScript

You can use .map() to operate on and manipulate the data of arrays of objects:

interface User {
  id: number
  name: string
}

let users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

let names = users.map((user) => user.name)
console.log(names) // Output: ['Alice', 'Bob']

This example extracts the names from an array of User objects into a new array called names. This array is then logged to the console.

For further reading on TypeScript maps, see the official TypeScript documentation.