Live streamJoin us for "State of code review 2024" on July 18thRegister today

Maps in TypeScript

Kenny DuMez
Kenny DuMez
Graphite software engineer

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 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.

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.

Terminal
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.

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.
Terminal
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 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.

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.

Terminal
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.

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

Terminal
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.

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

Terminal
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.

Stay unblocked. Ship faster.
Experience the new developer workflow - create, review, and merge code continuously. Get started with one command.
Get started

Give your PR workflow
an upgrade today

Stack easier | Ship smaller | Review quicker

Or install our CLI.
Product Screenshot 1
Product Screenshot 2