Map trong TypeScript: Map<K, V>, get, set, has và cách lặp

Map trong TypeScript là Map có sẵn của JavaScript với khóa và giá trị có kiểu: Map<string, number> ánh xạ chuỗi sang số. Tạo một Map bằng new Map<K, V>(), rồi dùng set, get, has và delete. get trả về V | undefined, vì khóa có thể không tồn tại.

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

Chính các type argument làm cho Map hữu ích trong TypeScript: mọi lời gọi set đều được kiểm tra và mọi lời gọi get trả về kiểu giá trị. Dòng cuối là lỗi biên dịch (TS2345); @ts-expect-error giúp khối code vẫn chạy được.

Trang này nói về tập hợp Map. Nếu bạn đang tìm array.map(), nó được trình bày ở phần cuối.

Tạo một Map

Kiểu đến từ type argument, từ các mục ban đầu, hoặc từ chú thích kiểu. Các mục ban đầu là một mảng các tuple [key, value], hoặc bất cứ thứ gì sinh ra chúng.

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

Hai cái bẫy khi suy luận kiểu:

• new Map() không có type argument và không có mục nào là Map<any, any>. Không gì bạn đưa vào hay lấy ra được kiểm tra. Hãy luôn viết new Map<K, V>().
• Các mục có kiểu giá trị khác nhau không được suy ra thành union. new Map([["a", 1], ["b", "x"]]) là lỗi TS2769 (No overload matches this call). Hãy viết kiểu ra: new Map<string, number | string>([...]).

get trả về V | undefined

Map không thể hứa một khóa tồn tại, nên get có kiểu V | undefined. Với strict, bạn phải xử lý undefined trước khi dùng giá trị như một 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'.

Các cách sửa, từ phổ biến nhất đến ít phổ biến nhất:

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 không nhớ rằng has đã trả về true khi bạn gọi get sau đó. Kiểm tra trực tiếp kết quả của get vừa ngắn hơn vừa an toàn. Non-null assertion, stock.get("apples")!, làm lỗi biến mất nhưng không bảo vệ gì nếu khóa không tồn tại.

Các phương thức của Map và kiểu của chúng

Lặp qua một Map

Map được duyệt theo thứ tự thêm vào. for...of trên Map trả về các tuple [key, value], có kiểu [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' ]

Đặt lại một khóa đã có sẽ cập nhật giá trị nhưng giữ nguyên vị trí ban đầu của nó trong thứ tự.

Đối tượng làm khóa và đếm phần tử

Giá trị nào cũng làm khóa được, kể cả đối tượng và mảng. Khóa được so sánh như ===: hai đối tượng có cùng nội dung là hai khóa khác nhau. Map cũng là cách chuẩn để đếm hoặc nhóm các phần tử.

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

Để dùng nội dung của đối tượng làm khóa, hãy suy ra một khóa chuỗi hoặc số, chẳng hạn user.id hoặc `${x},${y}`.

Map, object và Record

Quy tắc chung: dùng Map cho tập hợp có khóa là dữ liệu (id người dùng, từ, mục cache) và thay đổi lúc chạy; dùng kiểu object hoặc Record cho một tập khóa cố định đã biết và cho mọi thứ đi vào hoặc đi ra từ JSON. Trang dictionary so sánh index signature, Record và Map cho việc tra cứu theo khóa chuỗi.

Chuyển Map sang object và JSON

Các mục của Map không phải thuộc tính, nên JSON.stringify không nhìn thấy chúng. Hãy chuyển qua Object.fromEntries và 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 trả về any, nên as Record<...> khẳng định dữ liệu được kỳ vọng là gì. Đó không phải kiểm tra lúc chạy; hãy kiểm tra JSON không đáng tin trước khi tin vào kiểu đó.

Khai báo kiểu cho array.map()

Nhiều lượt tìm "typescript map" thực ra muốn nói phương thức mảng, vốn biến đổi từng phần tử và trả về một mảng mới. Kiểu của nó được suy ra từ callback, nên hiếm khi cần chú thích:

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

Chú thích kiểu trả về của callback ((u): Option => ...) là cách rõ ràng nhất để nêu kiểu kết quả: khi đó, một thuộc tính bị thiếu hoặc viết sai trong đối tượng trả về sẽ là lỗi biên dịch ngay tại callback.