TypeScript - How to use array map to an ES 6 Map?

Question

Lets say I have an array of key value objects:

const data = [
    {key: "object1", value: "data1"},
    {key: "object2", value: "data2"},
    {key: "object3", value: "data3"},
]

const mappedData = data.map(x => [x.key, x.value]);

const ES6Map = new Map<string, string>(mappedData.values())

How do I convert it to ES 6 map? It works in JavaScript but TypeScript will complain. Here I got the error of Argument of type 'IterableIterator<string[]>' is not assignable to parameter of type 'ReadonlyArray<[string, string]>'. Property 'length' is missing in type 'IterableIterator<string[]>'.

Solution

You need to do type assertion and tell typescript that your mappedData is of type Array<[string,string]> instead of string[][] which is a sub type for Array<[any,any]> as needed by Map constructor.

Do

const mappedData = data.map(x => [x.key, x.value] as [string, string]);

instead of

const mappedData = data.map(x => [x.key, x.value]);

and also

drop the values() call as pointed out in comments.

Comments

[Yoda]

What is the type of x in those examples?