Що таке Map у TypeScript?

TypeScriptJunior~1 хв читання

1. Що таке `Map`

Map<K, V> - це структура даних, яка зберігає пари ключ-значення і запам'ятовує порядок додавання елементів.

На відміну від звичайного об'єкта {}, ключами в Map можуть бути будь-які типи, не тільки рядки.

Приклад

javascript

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

map.set("apples", 5);
map.set("bananas", 10);

console.log(map.get("apples")); // 5
console.log(map.size);          // 2

Тут string - тип ключа, number - тип значення. map.get("bananas") поверне number | undefined, тому що елемент може бути відсутнім.

2. Синтаксис з generic-параметрами

Тип оголошується як:

javascript

Map<KeyType, ValueType>

Приклади:

javascript

const userRoles: Map<number, string> = new Map();
userRoles.set(1, "admin");
userRoles.set(2, "user");

або

javascript

const dictionary: Map<string, string[]> = new Map();
dictionary.set("frontend", ["React", "TypeScript", "CSS"]);

3. Основні методи `Map`

Метод	Що робить	Приклад
`.set(key, value)`	Додати або оновити елемент	`map.set("x", 1)`
`.get(key)`	Отримати значення	`map.get("x")` -> `1`
`.has(key)`	Перевірити наявність ключа	`map.has("x")` -> `true`
`.delete(key)`	Видалити елемент	`map.delete("x")`
`.clear()`	Очистити Map	`map.clear()`
`.size`	Кількість елементів	`map.size`

Приклад використання

javascript

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

points.set("Alice", 10);
points.set("Bob", 20);

console.log(points.has("Bob"));  // true
console.log(points.get("Bob"));  // 20

points.delete("Alice");
console.log(points.size);        // 1

4. Перебір `Map`

Map можна перебирати різними способами:

javascript

const users = new Map<number, string>([
  [1, "Tim"],
  [2, "Max"],
  [3, "Bob"],
]);

// for...of
for (const [id, name] of users) {
  console.log(id, name);
}

// forEach
users.forEach((name, id) => {
  console.log(`${id}: ${name}`);
});

// тільки ключі
for (const key of users.keys()) console.log(key);

// тільки значення
for (const value of users.values()) console.log(value);

5. Типізація з об'єктами і кастомними типами

javascript

interface User {
  id: number;
  name: string;
}

const userScores = new Map<User, number>();

const tim: User = { id: 1, name: "Tim" };
const max: User = { id: 2, name: "Max" };

userScores.set(tim, 100);
userScores.set(max, 80);

console.log(userScores.get(tim)); // 100

На відміну від Record, Map дозволяє використовувати об'єкти як ключі.

6. Створення `Map` з початковими даними

javascript

const cities = new Map<string, number>([
  ["Berlin", 3645000],
  ["Paris", 2140000],
  ["Tokyo", 13900000],
]);

Передаємо масив пар [ключ, значення]. TypeScript автоматично виведе типи.

7. Незмінна (readonly) карта

Якщо потрібно заборонити зміни:

javascript

const roles = new Map<number, string>([
  [1, "admin"],
  [2, "user"],
]) as const;

// roles.set(3, "guest"); Помилка

або через ReadonlyMap<K, V>:

javascript

const roles: ReadonlyMap<number, string> = new Map([
  [1, "admin"],
  [2, "user"],
]);

8. Відмінності `Map` від `Object` і `Record`

Властивість	`Object` / `Record`	`Map`
Ключі	тільки `string` або `symbol`	будь-які типи (включно з об'єктами, числами, функціями)
Порядок елементів	не гарантований	зберігає порядок вставки
Отримання розміру	`Object.keys(obj).length`	`.size`
Ітерація	вручну через `for...in`	вбудована ітерація (`for...of`, `.forEach`)
Продуктивність при великій кількості елементів	нижче	вище
Типізація в TS	через `Record<K,V>`	через `Map<K,V>`

Приклад порівняння

javascript

const obj: Record<string, number> = { apples: 10, bananas: 5 };
const map: Map<string, number> = new Map([
  ["apples", 10],
  ["bananas", 5],
]);

obj["oranges"] = 7;
map.set("oranges", 7);

Але Map має .has(), .size і може використовувати об'єкт як ключ:

javascript
const key = { id: 1 }; map.set(key, 123); // добре

Підсумок

Map<K, V> - колекція пар ключ-значення з будь-якими типами ключів і гарантією порядку.

Основне:

Ключі можуть бути будь-якого типу (на відміну від об'єктів).

Використовує generic-синтаксис Map<KeyType, ValueType>.

Швидка перевірка й ітерація.

Часто застосовується замість Record для динамічних або нестатичних ключів.

Типізація:

javascript
const map: Map<string, number> = new Map();

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.