Specifying the data structure of a complex nested Map in TypeScript

Struggling to create a deeply nested (recursive) Map in Typescript generically. My attempt is to convert the provided Javascript example to Typescript:

const map1 = new Map([
  ['key1', 'value1']
])
const map2 = new Map([
  ['keyA', 'valueB'],
  ['keyB', map1]
])

const map3 = new Map([
  ['keyX', 'valueY'],
  ['keyZ', map2]
])

console.log('map3', map3)

Appreciate any guidance.

Answer №1

Typescript introduces the concept of recursive type references, allowing us to define a map's value as follows:

type StringOrMap = string | Map<string, StringOrMap>

This can be explicitly specified for the Map constructor:

const o2 = new Map<string, StringOrMap>([
  ['b1', 'B'],
  ['b2', o1]
])

const o3 = new Map<string, StringOrMap>([
  ['c1', 'C'],
  ['c2', o2]
])

Explore further in the Playground

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

Deciphering the .vimrc setup for tooltips and symbols in TypeScript

Currently, I have integrated the Tsuquyomi plugin for my typescript development in Vim. The documentation mentions tooltips for symbols under the cursor, which are working fine. The issue arises as I am using terminal-based Vim, and even if I were using a ...

Transferring data between pages in Next JS using App Route and Typescript

Seeking assistance to extract data from an array on one page and display it on another page. I am working with NextJs, Typescript, and AppRoute. Code in app/page.tsx: import Image from 'next/image' import Link from 'next/link' const l ...

Typescript-enabled NodeJS REST client

I'm currently working on a nodejs web application using express and I want to access my API. I have experimented with various options, such as restangular and jquery ajax calls. Can anyone recommend some reliable REST client libraries with TypeScrip ...

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

import React from 'react'; import Link from 'next/link'; import { urlFor } from '../lib/clients'; const Product = ({ product: { image, name, slug, price } }) => { return ( <div> <Link href={`/product/ ...

NestJS TypeORM InjectRepository throwing an error: "Cannot access property 'prototype' of undefined"

Encountering an issue while trying to unit test. Here is the error message that I received: TypeError: Cannot read property 'prototype' of undefined export class UserService { constructor(@InjectRepository(User) private readonly userRepository ...

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2

I have a form that allows users to create Todo's. An ITodo object includes the following properties: export interface ITodo { id: number; title: string; priority: ITodoPriority; } export interface ITodoPriority { id: number; name ...

What could be the reason for receiving an undefined value when trying to determine the size of the Set

Within one of my functions, I am encountering the following code: this.personService.getPersonInfo(this.personId).subscribe((res => { let response = res.body; let num = response.personList.size; ... })) Here is what the expe ...

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

Observable map encounters an error when attempting to retrieve essential data from the backend server

Here is my approach: getDropdownData(id: number | 195731): Observable<ClinicTrialSettingProp> { return this.http .get<ClinicTrialSettingProp>(this.commonPatientURL + id + '/clinic-trials') .pipe(map(response => res ...

What could be the reason behind the error related to react-router-dom?

index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.S ...

How can I effectively utilize the Metamask SDK with TypeScript?

Currently, I am in the process of developing a webpack+pnpm+typescript+react website. All the versions being used are LTS and my preferred IDE is VSCode. According to the guide provided by Metamask here, it seems like I need to follow these steps: npm i @m ...

The object might be undefined; TypeScript; Object

Why is it that the object may be undefined, even though it is hard-coded in my file as a constant that never changes? I've tried using ts-ignore without success. const expressConfig = { app: { PORT: 3000, standardResponse: `Server ...

Expanding interfaces dynamically in Typescript

Currently, I am facing a challenge while attempting to integrate an existing React Native module equipped with the following props: useComponent1: boolean useComponent2: boolean This is how the implementation looks like: render(){ if(useComponent1){ ...

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

Building a Vuetify Form using a custom template design

My goal is to create a form using data from a JSON object. The JSON data is stored in a settings[] object retrieved through an axios request: [ { "id" : 2, "name" : "CAR_NETWORK", "value" : 1.00 }, { "id" : 3, "name" : "SALES_FCT_SKU_MAX", "val ...

Accessing properties within nested objects in a class

In my Angular 7 application, I have two object classes filled with data - employee and company (data retrieved through a web API from a database). The Employee class has fields - emp_id, name, surname, and a company object. The Company class has - c_id, ...

Problem integrating 'fs' with Angular and Electron

Currently, I am working with Angular 6.0, Electron 2.0, TypeScript 2.9, and Node.js 9.11 to develop a desktop application using the Electron framework. My main challenge lies in accessing the Node.js native API from my TypeScript code. Despite setting "com ...

Tips for passing a query parameter in a POST request using React.js

I am new to working with ReactJS and I have a question about passing boolean values in the URL as query parameters. Specifically, how can I include a boolean value like in a POST API call? The endpoint for the post call is API_SAMPLE: "/sample", Here is ...

Uploading CSV files in Angular 4

I am currently working on an Angular4 project where I have implemented a feature that converts data into a CSV file with a header. Now, I am looking to reverse this process and allow users to upload a CSV file instead. To test this functionality, I create ...