TypeScript Map: Map<K, V>, get, set, has ve Döngü

TypeScript Map, anahtarları ve değerleri tiplenmiş yerleşik JavaScript Map yapısıdır: Map<string, number> string'leri number'lara eşler. new Map<K, V>() ile bir tane oluşturun, sonra set, get, has ve delete kullanın. get, anahtar eksik olabileceği için V | undefined döndürür.

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

Bir Map'i TypeScript'te işe yarar kılan tip argümanlarıdır: her set kontrol edilir ve her get değer tipini döndürür. Son satır bir derleme hatasıdır (TS2345); @ts-expect-error bloğun çalışmaya devam etmesini sağlar.

Bu sayfa Map koleksiyonu hakkındadır. array.map() arıyorsanız, son bölümde ele alınıyor.

Map Oluşturmak

Tipler tip argümanlarından, başlangıç girdilerinden ya da bir notasyondan gelir. Başlangıç girdileri [key, value] tuple'larından oluşan bir dizi ya da bunları üreten başka herhangi bir şeydir.

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

İki çıkarım tuzağı:

• Tip argümanı ve girdisi olmayan new Map(), Map<any, any> tipindedir. İçine koyduğunuz ya da içinden aldığınız hiçbir şey kontrol edilmez. Her zaman new Map<K, V>() yazın.
• Farklı değer tiplerine sahip girdiler bir union çıkarmaz. new Map([["a", 1], ["b", "x"]]) TS2769 hatasıdır (No overload matches this call). Tipi yazın: new Map<string, number | string>([...]).

get V | undefined Döndürür

Bir Map bir anahtarın var olduğunu garanti edemez, bu yüzden get metodu V | undefined olarak tiplenir. strict altında değeri bir V olarak kullanmadan önce undefined durumunu ele almalısınız:

// 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'.

En yaygından en az yaygına çözümler:

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, sonradan get çağırdığınızda has metodunun true döndürdüğünü hatırlamaz. get sonucunu doğrudan kontrol etmek hem daha kısa hem de güvenlidir. Bir non-null assertion, stock.get("apples")!, hatayı susturur ama anahtar eksikse hiçbir koruma sağlamaz.

Map Metotları ve Tipleri

Bir Map Üzerinde Döngü

Bir Map ekleme sırasıyla dolaşılır. Map üzerindeki for...of, [K, V] olarak tiplenmiş [key, value] tuple'ları üretir.

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

Var olan bir anahtarı set etmek değeri günceller ama anahtarın sıradaki orijinal konumunu korur.

Nesne Anahtarları ve Sayma

Nesneler ve diziler dahil her değer bir anahtar olabilir. Anahtarlar === gibi karşılaştırılır: aynı içeriğe sahip iki nesne farklı anahtarlardır. Bir Map ayrıca öğeleri saymanın ya da gruplamanın standart yoludur.

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

Bir nesnenin içeriğine göre anahtar kullanmak için bunun yerine user.id ya da `${x},${y}` gibi bir string ya da number anahtar türetin.

Map, Nesne ve Record

Pratik kural: anahtarları veri olan (kullanıcı id'leri, kelimeler, önbellek girdileri) ve çalışma zamanında değişen bir koleksiyon için Map; bilinen sabit bir anahtar kümesi ve JSON'a giden ya da JSON'dan gelen her şey için bir nesne tipi ya da Record kullanın. dictionary sayfası string anahtarlı aramalar için index signature'ları, Record ve Map yapısını karşılaştırır.

Map'leri Nesnelere ve JSON'a Dönüştürmek

Bir Map yapısının girdileri özellik değildir, bu yüzden JSON.stringify onları görmez. Object.fromEntries ve Object.entries üzerinden dönüştürün:

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 döndürür, bu yüzden as Record<...> verinin ne olması beklendiğini belirtir. Bu bir çalışma zamanı kontrolü değildir; güvenilmeyen JSON'u bu tipe güvenmeden önce doğrulayın.

array.map() Tiplemesi

"typescript map" aramalarının çoğu, her elemanı dönüştürüp yeni bir dizi döndüren dizi metodunu kasteder. Tipi callback'ten çıkarılır, bu yüzden notasyon nadiren gerekir:

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'in dönüş tipine notasyon yazmak ((u): Option => ...), sonuç tipini belirtmenin en açık yoludur: döndürülen nesnedeki eksik ya da yanlış yazılmış bir özellik o zaman callback'te bir derleme hatası olur.