Difference Between Record Vs Map In TypeScript

When working with key-value pairs in TypeScript, developers often face a choice between using the Record utility type and the Map data structure. While both serve similar purposes, they have distinct differences in terms of syntax, usage, and performance.

In this tutorial, we’ll explore the difference between record vs map in TypeScript in detail, providing examples and outlining their differences to help you make informed decisions in your TypeScript projects.

Table of Contents

Understand the Record Utility Type in TypeScript

The Record utility type, introduced in TypeScript 2.1, allows you to create a typed object with a specific set of keys and a common value type.

It provides a concise way to define an object type where the keys are known ahead of time, and the values share the same type. The record type is a static type declaration that is resolved at compile-time.

Here’s the basic syntax of the Record type:

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

In this syntax, K represents the type of the keys, which must be a subtype of string | number | symbol, and T represents the type of values.

Let’s look at an example to illustrate the usage of Record:

type Person = Record<'name' | 'age', string>;

const person: Person = {
    name: 'John Doe',
    age: '30',
};

In this example, we define a Person type using Record, specifying that the keys can be either 'name' or 'age', and the values are of type string. The person object adheres to this type, ensuring that it has the required keys with string values.

Exploring the Map Data Structure in TypeScript

On the other hand, the Map data structure in TypeScript is a runtime construct that allows you to store key-value pairs. Unlike the Record type, Map is both a runtime construct and a type declaration. It provides methods to interact with the stored key-value pairs dynamically.

Here’s an example of creating and using a Map in TypeScript:

const map = new Map<string, number>();
map.set('apple', 1);
map.set('banana', 2);

console.log(map.get('apple')); // Output: 1
console.log(map.size); // Output: 2

In this example, we create a Map instance called map that stores key-value pairs where the keys are of type string and the values are of type number. We use the set method to add key-value pairs to the map and the get method to retrieve values by their keys.

Difference Between Record vs Map in TypeScript

Key Difference Record vs Map in TypeScript

Now that we have a basic understanding of Record and Map, let’s outline their key differences:

Type vs. Runtime:

Record is a static type declaration that is resolved at compile-time. It helps ensure type safety and catches type-related errors during development.
Map is a runtime data structure that allows dynamic manipulation of key-value pairs. It provides methods to interact with the stored data at runtime.

Key Types:

With Record, the keys must be a subtype of string | number | symbol, typically specified as literal types or unions of literal types.
Map allows any value to be used as a key, including objects, functions, and primitive types.

Value Types:

In Record, all values must share the same type, specified as the second type parameter.
Map allows different types of values for each key-value pair, providing more flexibility.

Performance:

Record is a plain JavaScript object under the hood, offering better performance for simple key-value lookups.
Map provides additional functionality like maintaining insertion order and efficient key-value iteration, but may have slightly slower performance compared to plain objects.

Mutability:

Objects created using Record are mutable, allowing you to modify their properties directly.
Map instances are also mutable, providing methods like set, delete, and clear to modify the stored key-value pairs.

Summary

Feature	Record	Map
Type	Static type declaration	Runtime data structure and type declaration
Key Types	Subtype of string \| number \| symbol	Any value (objects, functions, primitives)
Value Types	Same type for all values	Different types for each key-value pair
Performance	Better for simple key-value lookups	Slightly slower compared to plain objects
Mutability	Mutable objects	Mutable with methods like set, delete, clear

Conclusion

In this tutorial, we explored the difference between record vs map in TypeScript. Record is a static type declaration that allows you to create typed objects with specific keys and a common value type, providing compile-time type safety. On the other hand, Map is a runtime data structure that offers dynamic manipulation of key-value pairs and supports various types of keys and values.

When deciding between Record and Map, consider your specific use case. If you have a fixed set of keys and all values share the same type, Record can be a good choice for its simplicity and performance. However, if you need more flexibility in terms of key and value types or require additional functionality like maintaining insertion order, Map may be a better fit.

By understanding the strengths and differences of Record and Map, you can make informed decisions and leverage them effectively in your TypeScript projects.