TypeScript Map: Map<K, V>, get, set, has ואיטרציה

Map ב-TypeScript הוא ה-Map המובנה של JavaScript, עם מפתחות וערכים בעלי טיפוס: Map<string, number> ממפה מחרוזות למספרים. יוצרים אחד עם new Map<K, V>(), ואז משתמשים ב-set, get, has ו-delete. get מחזיר V | undefined, כי ייתכן שהמפתח חסר.

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");

ארגומנטי הטיפוס הם מה שהופך את Map לשימושי ב-TypeScript: כל set נבדק וכל get מחזיר את טיפוס הערך. השורה האחרונה היא שגיאת קומפילציה (TS2345); @ts-expect-error מאפשר לבלוק לרוץ.

הדף הזה עוסק באוסף Map. אם חיפשתם את array.map(), הוא מוסבר בחלק האחרון.

יצירת Map

הטיפוסים מגיעים מארגומנטי טיפוס, מרשומות התחלתיות או מהגדרת טיפוס. רשומות התחלתיות הן מערך של tuples מהצורה [key, value], או כל דבר אחר שמניב אותם.

// 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);

שתי מלכודות בהסקת טיפוסים:

• new Map() בלי ארגומנטי טיפוס ובלי רשומות הוא Map<any, any>. שום דבר שמכניסים או מוציאים לא נבדק. תמיד כתבו new Map<K, V>().
• רשומות עם טיפוסי ערך שונים לא מוסקות כ-union. new Map([["a", 1], ["b", "x"]]) היא שגיאה TS2769 (No overload matches this call). כתבו את הטיפוס: new Map<string, number | string>([...]).

get מחזיר V | undefined

Map לא יכול להבטיח שמפתח קיים, ולכן הטיפוס של get הוא V | undefined. במצב strict חובה לטפל ב-undefined לפני שמשתמשים בערך כ-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'.

הפתרונות, מהנפוץ ביותר לפחות נפוץ:

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 לא זוכר ש-has החזיר true כשקוראים אחר כך ל-get. בדיקה ישירה של התוצאה של get גם קצרה יותר וגם בטוחה. non-null assertion, stock.get("apples")!, משתיק את השגיאה אבל לא מגן אם המפתח חסר.

המתודות של Map והטיפוסים שלהן

איטרציה על Map

Map עובר על הרשומות לפי סדר ההכנסה. for...of על ה-map מניב tuples מהצורה [key, value], בטיפוס [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' ]

הגדרה של מפתח קיים מעדכנת את הערך אבל שומרת על המיקום המקורי שלו בסדר.

אובייקטים כמפתחות וספירה

כל ערך יכול להיות מפתח, כולל אובייקטים ומערכים. מפתחות מושווים כמו ===: שני אובייקטים עם אותו תוכן הם מפתחות שונים. Map הוא גם הדרך המקובלת לספור פריטים או לקבץ אותם.

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' ] }

כדי להשתמש בתוכן של אובייקט כמפתח, גזרו ממנו מפתח מסוג מחרוזת או מספר, כמו user.id או `${x},${y}`.

Map מול אובייקט מול Record

כלל אצבע: Map לאוסף שהמפתחות שלו הם נתונים (מזהי משתמשים, מילים, רשומות cache) ומשתנים בזמן ריצה; טיפוס אובייקט או Record לקבוצה קבועה של מפתחות ידועים ולכל דבר שהולך ל-JSON או מגיע ממנו. הדף על dictionary משווה בין index signatures, Record ו-Map לחיפושים לפי מפתח מחרוזת.

המרת Map לאובייקטים ול-JSON

הרשומות של Map אינן מאפיינים, ולכן JSON.stringify לא רואה אותן. המירו דרך Object.fromEntries ו-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 מחזיר any, ולכן as Record<...> מצהיר מה הנתונים אמורים להיות. זו לא בדיקה בזמן ריצה; אמתו JSON לא מהימן לפני שסומכים על הטיפוס הזה.

הגדרת טיפוסים ל-array.map()

הרבה חיפושים של "typescript map" מתכוונים למתודת המערך, שהופכת כל איבר ומחזירה מערך חדש. הטיפוס שלה מוסק מה-callback, כך שכמעט אף פעם אין צורך בהגדרות טיפוס:

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);

הגדרת טיפוס ההחזרה של ה-callback ((u): Option => ...) היא הדרך הברורה ביותר לציין את טיפוס התוצאה: מאפיין חסר או עם שגיאת כתיב באובייקט המוחזר הופך אז לשגיאת קומפילציה ב-callback.