Creating a Map from an array of key-value pairs: A step-by-step guide

Arrays are essential in programming

const myArray = [['key1', 'value1'], ['key2', 'value2']];

Creating a Map from an array is a common task.

However, sometimes things don't go as planned:

const myMap = new Map(myArray);

This can lead to errors like:

No overload matches this call.
  Overload 1 of 3, '(iterable: Iterable<readonly [unknown, unknown]>): Map<unknown, unknown>', gave the following error.
    Argument of type 'string[][]' is not assignable to parameter of type 'Iterable<readonly [unknown, unknown]>'.
...

But fear not! There's a solution:

const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

Answer №1

Typescript will automatically infer the type of myArray as:

string[][]

The challenge arises when trying to use the Map constructor, which only accepts iterables containing arrays with exactly two items.

To avoid TS from widening the type of "an array of arrays of 2 strings" to "an array of arrays of strings", you can define myArray as const:

const myArray = [['key1', 'value1'], ['key2', 'value2']] as const;

For older versions of TS that don't support as const, another approach is:

const myArray: Array<[string, string]> = [['key1', 'value1'], ['key2', 'value2']];

If there's a need to preserve keys and values exactly:

const myArray = [['key1', 'value1'] as ['key1', 'value1'], ['key2', 'value2'] as ['key2', 'value2']];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error shown in console when using Angular 7 FormControlName

My webpage has a reactive form, but I keep encountering an error message that states: ERROR Error: formControlName must be used with a parent formGroup directive. Make sure to include a formGroup directive and pass it an existing FormGroup instance (you ...

Defining a structure for an entity in which its attributes distinguish between different data types and an array combination

I strongly believe that the best way to showcase this concept is through a clear example: enum EventType { A, B, C }; type MyEvent = [EventType.A, number] | [EventType.B, string] | [EventType.C, number, string]; const eventsGrouped: Record<Event ...

Regular expressions that identify text located at the conclusion of a URL

Although the title may not be entirely appropriate, my goal is to create a regex that will remove any trailing '/' at the end of a URL under certain conditions. For example: http://stackoverflow.com/questions/ask/ to http://stackoverflow.com/qu ...

Using React-Bootstrap with TypeScript in your project

I'm currently working on creating a navigation bar using react-bootstrap. I've already installed the node-module as follows: "@types/react-bootstrap": "^0.32.11",. However, when I try to use it in my hello.tsx component, I encounter a compile err ...

Netlify is unable to install a forked npm module due to the failure to retrieve metadata

I recently forked and modified the g-sheets-api module. Here is my version: https://github.com/lpares12/g-sheets-api After making the modifications, I installed it in my web project using the following command: npm install git+https://github.com/lpares12/ ...

The variable being declared at the class level inside a function within the same class is not recognized

Seeking guidance on the code snippet I'm currently studying. I am implementing a TypeScript 1.8.10 compiler along with EM5: module myAmazingModule{ 'use strict'; export interface INavigateService { links: string[], ...

Error encountered in app.module.ts file of Angular 2 application

My friends and I are working on a big school project, creating a cool web app. Suddenly, I encountered some errors in my app.module.ts file that I haven't seen before. It's strange because they are showing up out of nowhere! The error: Error:( ...

A TypeScript export class that is created based on configuration parameters

As someone who has primarily worked with C#, TypeScript is a new and exciting challenge for me. I've been enjoying exploring what I can create quickly using Node/TypeScript. However, I've run into a syntax issue that I could use some help with. I ...

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...

Customize stepper background color in Angular Material based on specific conditions

I am working on a project using Angular Material and I want to dynamically change the color of the stepper based on different states. For example: state: OK (should be green) state: REFUSED (should be red) Here is what I have done so far: <mat-horizo ...

Retrieve access type, path, and value when importing dynamically

I am seeking a solution to specify the argument for example. Currently, the code only sets it to any. Playground function clientImport <T extends string>(v: T) { const resolve = () => import(v) type ResolveReturn = Awaited<ReturnType<typ ...

Allow for an optional second parameter in Typescript type definition

Here are two very similar types that I have: import { VariantProps } from "@stitches/core"; export type VariantOption< Component extends { [key: symbol | string]: any }, VariantName extends keyof VariantProps<Component> > = Extra ...

The type "AppRouterInstance" cannot be assigned to type "nextRouter"

Within my Next.js project, a registration form is included as seen below: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form" ...

Different ways to showcase a value from the CSS file on the console using console.log

In this guide, you can learn how to create a custom directive in Angular by following this tutorial: Custom Directive Tutorial. The directive should function as intended. Still, I want to see the color value set in the CSS file displayed on the console us ...

TS object encountering a restriction with an inaccessible method

I'm facing a challenge trying to utilize a method stored on a Typescript class within a Vue component. When I attempt to use a method defined on that class from another class (which also happens to be a Typescript Vue component), the console throws a ...

Tips for how to retrieve an instance of a class or an error in Typescript

Currently, I am experimenting with TypeScript and a library called TypeORM while constructing custom repositories for my models. Within my models, specifically the Buyer model, there is a corresponding BuyerRepository featuring a method named createAndSav ...

Guide to importing a class property from one file to another - Using Vue with Typescript

Here is the code from the src/middlewares/auth.ts file: import { Vue } from 'vue-property-decorator' export default class AuthGuard extends Vue { public guest(to: any, from: any, next: any): void { if (this.$store.state.authenticated) { ...

Exploring the capabilities of renderOption within Material-UI's AutoComplete functionality

Hey there, I've been pondering a question lately and could really use some help. I've been trying to set up my autocomplete feature to display a label in the options while having a different value. After doing some research, I learned about usin ...

Develop a versatile post/put/get request in TypeScript for React applications

I am currently working on enhancing my generic writing skills. I have implemented POST/PUT/DELETE/GET for attachments along with various entity types (with more to be added in the future). The existing code functions correctly and is more generic compared ...

"Exploring the world of mocking module functions in Jest

I have been working on making assertions with jest mocked functions, and here is the code I am using: const mockSaveProduct = jest.fn((product) => { //some logic return }); jest.mock('./db', () => ({ saveProduct: mockSaveProduct })); ...