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

추론에는 함정이 두 가지 있습니다.

• 타입 인수도 항목도 없는 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의 결과를 직접 검사하는 편이 더 짧고 안전합니다. non-null 단언 stock.get("apples")!는 오류를 없애지만 키가 없을 때 아무런 보호도 해 주지 않습니다.

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 => ...)이 결과 타입을 밝히는 가장 명확한 방법입니다. 반환하는 객체에서 프로퍼티가 빠지거나 이름이 틀리면 콜백에서 바로 컴파일 오류가 납니다.