Map en TypeScript: Map<K, V>, get, set, has y recorrerlo

Un Map de TypeScript es el Map integrado de JavaScript con claves y valores tipados: Map<string, number> asocia strings a números. Crea uno con new Map<K, V>() y luego usa set, get, has y delete. get devuelve V | undefined, porque puede que la clave no exista.

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

Los argumentos de tipo son lo que hace útil un Map en TypeScript: cada set se comprueba y cada get devuelve el tipo del valor. La última línea es un error de compilación (TS2345); @ts-expect-error mantiene el bloque en marcha.

Esta página trata de la colección Map. Si buscabas array.map(), está en la última sección.

Crear un Map

Los tipos vienen de los argumentos de tipo, de las entradas iniciales o de una anotación. Las entradas iniciales son un array de tuplas [key, value], o cualquier otra cosa que las produzca.

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

Dos trampas de inferencia:

• new Map() sin argumentos de tipo ni entradas es Map<any, any>. No se comprueba nada de lo que metes ni de lo que sacas. Escribe siempre new Map<K, V>().
• Las entradas con valores de distinto tipo no infieren una unión. new Map([["a", 1], ["b", "x"]]) es el error TS2769 (No overload matches this call). Escribe el tipo: new Map<string, number | string>([...]).

get devuelve V | undefined

Un Map no puede garantizar que una clave exista, así que get tiene tipo V | undefined. Con strict, debes ocuparte del undefined antes de usar el valor como 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'.

Las soluciones, de más a menos habitual:

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 no recuerda que has devolvió true cuando después llamas a get. Comprobar directamente el resultado de get es más corto y seguro. Una aserción non-null, stock.get("apples")!, silencia el error pero no protege de nada si la clave falta.

Métodos de Map y sus tipos

Recorrer un Map

Un Map se recorre en orden de inserción. for...of sobre el map produce tuplas [key, value], de tipo [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' ]

Asignar una clave que ya existe actualiza el valor pero mantiene su posición original en el orden.

Claves que son objetos y contar elementos

Cualquier valor puede ser una clave, incluidos objetos y arrays. Las claves se comparan como con ===: dos objetos con el mismo contenido son claves distintas. Un Map también es la forma estándar de contar o agrupar elementos.

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

Para usar el contenido de un objeto como clave, deriva una clave string o numérica, como user.id o `${x},${y}`.

Map frente a objeto y Record

Regla práctica: un Map para una colección cuyas claves son datos (ids de usuario, palabras, entradas de caché) y cambian en tiempo de ejecución; un tipo objeto o Record para un conjunto fijo de claves conocidas y para todo lo que va a o viene de JSON. La página de diccionarios compara las firmas de índice, Record y Map para búsquedas con claves string.

Convertir Maps en objetos y JSON

Las entradas de un Map no son propiedades, así que JSON.stringify no las ve. Convierte con Object.fromEntries y 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 devuelve any, así que el as Record<...> indica qué se espera que sean los datos. No es una comprobación en tiempo de ejecución; valida el JSON no fiable antes de confiar en ese tipo.

Tipar array.map()

Muchas búsquedas de «typescript map» se refieren al método de array, que transforma cada elemento y devuelve un array nuevo. Su tipo se infiere a partir del callback, así que rara vez hacen falta anotaciones:

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

Anotar el tipo de retorno del callback ((u): Option => ...) es la forma más clara de indicar el tipo del resultado: una propiedad que falta o está mal escrita en el objeto devuelto pasa a ser un error de compilación en el callback.