Define a Map with Array values in TypeScript

avatar

Borislav Hadzhiev

Wed Mar 09 20222 min read

banner

Photo by Julie Kwak

Define a Map with Array values in TypeScript #

To define a Map with array values in TypeScript, type the map to have keys of a specific type and set the values to have an array type, e.g. const map1 = new Map<number, string[]>(). All of the key-value pairs in the Map must conform to the specified type.

index.ts
const map1 = new Map<number, string[]>([ [0, ['a', 'b']], [1, ['c', 'd']], ]); map1.set(2, ['e', 'f']); // 👇️ ['e', 'f'] console.log(map1.get(2));

We used a generic to type the Map object to have keys of type number and values of type string[].

You can pass arrays to key-value pairs to the map if you want to initialize the Map with values.

If you try to set a key-value pair of a type that doesn't conform to the specified type, the type checker throws an error.
index.ts
const map1 = new Map<number, string[]>([ [0, ['a', 'b']], [1, ['c', 'd']], ]); // ✅ Works map1.set(2, ['e', 'f']); // ⛔️ Error: Argument of type 'string' is // not assignable to parameter of type 'string[]'.ts(2345) map1.set(3, 'hello');

We tried to add a value of type string when an array of strings is expected and got an error.

Here is an example of how the declare a Map that has array of objects as values.

index.ts
type Employee = { name: string; salary: number; }; const map1 = new Map<number, Employee[]>([ [ 0, [ { name: 'Alice', salary: 100 }, { name: 'Bob', salary: 150 }, ], ], ]); const arr: Employee[] = []; arr.push({ name: 'Carl', salary: 200 }); arr.push({ name: 'Dean', salary: 250 }); map1.set(1, arr); // 👇️ [{name: 'Carl', salary: 200}, {name: 'Dean', salary: 250}] console.log(map1.get(1));

The keys in the Map are of type number, because that's the first type we passed to the generic when defining the Map object. The values are of type Employee[].

When using the get method to get a Map value by specific key, the type of the value is possibly undefined.

TypeScript can't be sure that a value with the specified key exists in the Map.

You can use a type guard to make sure that the value is not undefined before accessing elements at index or properties on an object.

index.ts
type Employee = { name: string; salary: number; }; const map1 = new Map<number, Employee[]>([ [ 0, [ { name: 'Alice', salary: 100 }, { name: 'Bob', salary: 150 }, ], ], ]); map1.set(1, [{ name: 'Carl', salary: 200 }]); // 👇️ const result: Employee[] | undefined const result = map1.get(1); // ✅ If statement as type guard if (result !== undefined) { console.log(result[0]); // 👉️ {name: 'Carl', salary: 200} } // ✅ Optional chaining as type guard console.log(result?.[0]?.name); // 👉️ "Carl"

The if condition servers like a type guard, because TypeScript knows that the result variable is an array in the if block.

You can also use the optional chaining (?.) operator, which short-circuits instead of throwing an error if the reference is null or undefined.

Use the search field on my Home Page to filter through my more than 1,000 articles.