How to Use Map in TypeScript

Use Map in TypeScript when key-value data needs fast lookups, preserved insertion order, and keys beyond plain strings. It is perfect for caches, ID registries, lookup tables, and grouped collections.

What you’ll build or solve

You’ll learn how to use Map in TypeScript with typed keys and values. You’ll also know when Map is a better fit than a plain object.

When this approach works best

This approach is the right choice when keys may be numbers, objects, or values that should not be coerced into strings.

Common real-world scenarios include:

• User caches
• Product lookup tables
• Session registries
• Grouped analytics
• Object-based memoization

This is a bad idea when the structure is simple JSON-style data that needs serialization.

Prerequisites

You only need:

• Basic TypeScript generics
• Familiarity with key-value data
• Understanding of arrays and objects

Step-by-step instructions

Step 1: Create a typed Map

The generic shape is Map<KeyType, ValueType>.

const scores = new Map<string, number>();

This creates a map where keys are strings and values are numbers.

Add values with set().

scores.set("Alex", 95);
scores.set("Sam", 88);

This keeps key and value types fully safe.

Step 2: Read values with get()

Use get() to retrieve a value.

const alexScore = scores.get("Alex");

The result type becomes number | undefined.

This reminds you that missing keys are possible.

Step 3: Iterate through entries

Maps work naturally with loops.

for (const [name, score] of scores) {
  console.log(name, score);
}

This is great for rendering grouped data.

What to look for:

• Map<Key, Value> gives strong typing
• set() adds entries
• get() may return undefined
• Preserves insertion order
• Better than objects for non-string keys

Examples you can copy

User cache

const users = new Map<number, string>();

Product lookup

products.set("sku-101", "Keyboard");

Object keys

const cache = new Map<object, string>();

Common mistakes and how to fix them

Mistake 1: Forgetting undefined from get()

What the reader might do:

scores.get("Alex").toFixed(2);

Why it breaks: the key may not exist.

Corrected approach:

Check the value first.

Mistake 2: Using Map for JSON payloads

What the reader might do:

Store API response shapes in a Map.

Why it breaks: plain objects serialize more naturally.

Corrected approach:

Use objects for JSON-style data.

Mistake 3: Using objects as keys unintentionally

What the reader might do:

Create fresh object literals as lookup keys.

Why it breaks: different object references are different keys.

Corrected approach:

Reuse stable object references.

Troubleshooting

If get() returns undefined, verify the key exists.

If serialization matters, use plain objects instead.

If object keys fail, reuse the same reference.

If iteration order matters, Map is a strong fit.

Quick recap

• Use Map<Key, Value> for typed lookups
• get() may return undefined
• Great for caches and registries
• Better than objects for non-string keys
• Preserve stable object references as keys