Map di TypeScript: Map<K, V>, get, set, has, dan Iterasi

Map di TypeScript adalah Map bawaan JavaScript dengan key dan value yang bertipe: Map<string, number> memetakan string ke angka. Buat dengan new Map<K, V>(), lalu pakai set, get, has, dan delete. get mengembalikan V | undefined, karena key-nya bisa saja tidak ada.

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

ages.set("ada", 36);
ages.set("grace", 85).set("alan", 41); // set returns the map, so calls chain

console.log(ages.get("ada"));    // 36
console.log(ages.get("linus"));  // undefined
console.log(ages.has("grace"));  // true
console.log(ages.size);          // 3

ages.delete("alan");
console.log(ages); // Map(2) { 'ada' => 36, 'grace' => 85 }

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
ages.set("bob", "forty");

Argumen tipe itulah yang membuat Map berguna di TypeScript: setiap set diperiksa, dan setiap get mengembalikan tipe value. Baris terakhir adalah error kompilasi (TS2345); @ts-expect-error membuat blok ini tetap bisa dijalankan.

Halaman ini membahas koleksi Map. Kalau kamu sedang mencari array.map(), materinya ada di bagian terakhir.

Membuat Map

Tipenya berasal dari argumen tipe, dari entri awal, atau dari anotasi. Entri awal berupa array berisi tuple [key, value], atau apa pun yang menghasilkan tuple seperti itu.

// 1. Type arguments, empty map
const scores = new Map<string, number[]>();

// 2. Inferred from entries: Map<string, number>
const prices = new Map([
    ["tea", 2.5],
    ["coffee", 3.2],
]);

// 3. From an object: Map<string, boolean>
const flags = new Map(Object.entries({ darkMode: true, beta: false }));

// 4. Keys and values of any type
type User = { id: number; name: string };
const lastSeen = new Map<User, Date>();
lastSeen.set({ id: 1, name: "Ada" }, new Date("2024-03-15T10:30:00Z"));

console.log(scores.size, prices.get("tea"), flags.get("beta"), lastSeen.size);

Ada dua jebakan inferensi:

• new Map() tanpa argumen tipe dan tanpa entri bertipe Map<any, any>. Apa pun yang kamu masukkan atau ambil tidak diperiksa. Selalu tulis new Map<K, V>().
• Entri dengan tipe value yang berbeda tidak disimpulkan menjadi union. new Map([["a", 1], ["b", "x"]]) adalah error TS2769 (No overload matches this call). Tulis tipenya: new Map<string, number | string>([...]).

get Mengembalikan V | undefined

Map tidak bisa menjanjikan bahwa sebuah key ada, jadi get bertipe V | undefined. Dengan strict, kamu harus menangani undefined sebelum memakai nilainya sebagai V:

// This does not compile: get may return undefined.
const stock = new Map<string, number>([["apples", 3]]);

const apples: number = stock.get("apples");
console.log(apples);

index.ts(4,7): error TS2322: Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.

Cara memperbaikinya, dari yang paling umum sampai yang paling jarang:

const stock = new Map<string, number>([["apples", 3]]);

// 1. A default value with ??
const pears = stock.get("pears") ?? 0;
console.log(pears); // 0

// 2. Store the result and check it
const apples = stock.get("apples");
if (apples !== undefined) {
    console.log(apples * 2); // 6: apples is number here
}

// 3. Update a counter in one line
stock.set("apples", (stock.get("apples") ?? 0) + 1);
console.log(stock.get("apples")); // 4

// has() does not narrow a later get():
if (stock.has("apples")) {
    const n = stock.get("apples"); // still number | undefined
    console.log(n);
}

TypeScript tidak ingat bahwa has mengembalikan true saat kamu memanggil get sesudahnya. Memeriksa hasil get secara langsung lebih ringkas sekaligus aman. Non-null assertion, stock.get("apples")!, memang menghilangkan error-nya, tetapi tidak memberi perlindungan apa pun kalau key-nya tidak ada.

Method Map dan Tipenya

Iterasi Map

Map diiterasi sesuai urutan penyisipan. for...of pada map menghasilkan tuple [key, value], bertipe [K, V].

const prices = new Map<string, number>([
    ["tea", 2.5],
    ["coffee", 3.2],
    ["juice", 4],
]);

for (const [item, price] of prices) {   // item: string, price: number
    console.log(`${item}: ${price.toFixed(2)}`);
}

prices.forEach((price, item) => {       // value first, then key
    console.log(item.toUpperCase(), price);
});

const items = [...prices.keys()];       // string[]
const total = [...prices.values()].reduce((a, b) => a + b, 0);
console.log(items, total);              // [ 'tea', 'coffee', 'juice' ] 9.7

// Sorted by value: sort the entries, build a new Map
const byPrice = new Map([...prices].sort((a, b) => b[1] - a[1]));
console.log([...byPrice.keys()]);       // [ 'juice', 'coffee', 'tea' ]

Mengatur key yang sudah ada akan memperbarui value-nya tetapi mempertahankan posisi awalnya dalam urutan.

Key Berupa Object dan Menghitung

Nilai apa pun bisa menjadi key, termasuk object dan array. Key dibandingkan seperti ===: dua object dengan isi yang sama adalah key yang berbeda. Map juga merupakan cara standar untuk menghitung atau mengelompokkan item.

const a = { id: 1 };
const b = { id: 1 };
const visits = new Map<object, number>([[a, 5]]);
console.log(visits.get(a), visits.get(b)); // 5 undefined: b is another object

// Counting words
const words = "the cat and the hat and the bat".split(" ");
const counts = new Map<string, number>();
for (const w of words) {
    counts.set(w, (counts.get(w) ?? 0) + 1);
}
console.log(counts); // Map(5) { 'the' => 3, 'cat' => 1, 'and' => 2, 'hat' => 1, 'bat' => 1 }

// Grouping into arrays
const byLength = new Map<number, string[]>();
for (const w of new Set(words)) {
    const group = byLength.get(w.length) ?? [];
    group.push(w);
    byLength.set(w.length, group);
}
console.log(byLength); // Map(1) { 3 => [ 'the', 'cat', 'and', 'hat', 'bat' ] }

Untuk membuat key berdasarkan isi object, turunkan key berupa string atau angka, seperti user.id atau `${x},${y}`.

Map vs Object vs Record

Aturan praktisnya: Map untuk koleksi yang key-nya adalah data (id user, kata, entri cache) dan berubah saat runtime; tipe object atau Record untuk sekumpulan key tetap yang sudah diketahui, dan untuk apa pun yang dikirim ke atau diterima dari JSON. Halaman dictionary membandingkan index signature, Record, dan Map untuk lookup dengan key berupa string.

Mengubah Map menjadi Object dan JSON

Entri Map bukan properti, jadi JSON.stringify tidak melihatnya. Konversi lewat Object.fromEntries dan Object.entries:

const settings = new Map<string, string | number>([
    ["theme", "dark"],
    ["fontSize", 14],
]);

console.log(JSON.stringify(settings)); // {}

const obj = Object.fromEntries(settings); // { [k: string]: string | number }
const json = JSON.stringify(obj);
console.log(json); // {"theme":"dark","fontSize":14}

// And back again
const restored = new Map(Object.entries(JSON.parse(json) as Record<string, string | number>));
console.log(restored.get("theme")); // dark

JSON.parse mengembalikan any, jadi as Record<...> menyatakan bentuk data yang diharapkan. Itu bukan pemeriksaan saat runtime; validasi JSON yang tidak tepercaya sebelum memercayai tipe tersebut.

Memberi Tipe pada array.map()

Banyak pencarian "typescript map" sebenarnya mencari method array, yang mengubah setiap elemen dan mengembalikan array baru. Tipenya disimpulkan dari callback, jadi anotasi jarang dibutuhkan:

type User = { id: number; first: string; last: string };
const users: User[] = [
    { id: 1, first: "Ada", last: "Lovelace" },
    { id: 2, first: "Alan", last: "Turing" },
];

const names = users.map((u) => `${u.first} ${u.last}`); // string[]
const ids = users.map((u) => u.id);                     // number[]

// An explicit result type, checked against what the callback returns
type Option = { value: number; label: string };
const options = users.map((u): Option => ({ value: u.id, label: u.first }));

// With the index
const numbered = users.map((u, i) => `${i + 1}. ${u.first}`);

console.log(names, ids);
console.log(options);
console.log(numbered);

Memberi anotasi pada tipe kembalian callback ((u): Option => ...) adalah cara paling jelas untuk menyatakan tipe hasilnya: properti yang hilang atau salah ketik di object yang dikembalikan lalu menjadi error kompilasi di callback tersebut.