TypeScriptのMap: Map<K, V>、get・set・has とループ

TypeScriptの Map は、キーと値に型が付いたJavaScriptの組み込みの Map です。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");

TypeScriptで Map が役立つのは型引数のおかげです。すべての set がチェックされ、すべての get が値の型を返します。最後の行はコンパイルエラー（TS2345）で、@ts-expect-error によってブロックは実行されます。

このページはコレクションとしての Map についてです。array.map() を探している場合は、最後のセクションで説明しています。

Map を作る

型は、型引数、初期のエントリー、型注釈のいずれかから決まります。初期のエントリーは [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);

推論の落とし穴が2つあります:

• 型引数もエントリーもない new Map() は Map<any, any> です。入れるものも取り出すものも一切チェックされません。必ず new Map<K, V>() と書きましょう。
• 値の型が異なるエントリーからはユニオンは推論されません。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 のもとでは、値を V として使う前に undefined を処理する必要があります:

// 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は、あとで get を呼ぶときに has が true を返したことを覚えていません。get の結果を直接チェックするほうが短く、安全です。非 null アサーション stock.get("apples")! はエラーを消しますが、キーがなかった場合には何も守ってくれません。

Map のメソッドとその型

Map をループする

Map は挿入順にループします。Map に対する for...of は [K, V] 型の [key, value] タプルを返します。

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

既存のキーを set すると値は更新されますが、順序の中の元の位置は変わりません。

オブジェクトのキーと数え上げ

オブジェクトや配列を含め、どんな値でもキーにできます。キーは === のように比較されるので、中身が同じでも別のオブジェクトなら別のキーです。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

目安: キーがデータ（ユーザーID、単語、キャッシュのエントリー）で実行時に変わるコレクションには Map を、既知の決まったキーの集合や JSON とやり取りするものにはオブジェクト型や Record を使います。文字列キーでの参照について、インデックスシグネチャ、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」の検索の多くは、各要素を変換して新しい配列を返す配列のメソッドを指しています。その型はコールバックから推論されるので、型注釈が必要になることはほとんどありません:

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

コールバックの戻り値に型注釈を書く（(u): Option => ...）のが、結果の型を示すいちばんわかりやすい方法です。そうすれば、返すオブジェクトのプロパティが足りなかったりつづりが違ったりしたときに、コールバックの場所でコンパイルエラーになります。