Create a TypeScript array of objects that mirrors a Java List<Map<String, String>>

In my Java function, the argument type is List<Map<String, String>>. To perform a fetch call from a TypeScript file, I need to declare a variable whose type corresponds to List<Map<String, String>>.

As TypeScript does not have a built-in type for lists, how can we define List<Map<String, String>> in TypeScript ??

For reference, the Java function receives input as:

  [
   {
    xyz: 'Test',
    abc: 'Count',
   },
   {
    xyz: 'Test',
    abc: 'Latency',
   },
  ]

How do I receive this List<Map<String, String>> in TypeScript ??

javatypescripttype-conversionfetch

Answer №1

It appears that you are receiving an array. Arrays can be denoted using the built-in generic:

Array<T>

or by using [] (similar to Java):

T[]

The elements within the array are typical objects, with string keys paired with string values. This can be illustrated with a Record:

Record<string, string>

Therefore, you should expect either:

Record<string, string>[]

or

Array<Record<string, string>>

as the type.

Answer №2

In my opinion, a simple solution would be to define the type as {[key: string]: string}[]. Take this example where the code is functional and displays the desired output:

let bar: {[key: string]: string}[] = [];
bar = [
  {
    xyz: 'Hello',
    abc: 'World',
  },
  {
    xyz: 'Good',
    abc: 'Morning',
  },
];
console.log(bar);

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

Is there a way to trigger my alarm even when the app is fully closed on Android using Kotlin?

I'm developing a unique alarm app that requires running a specific piece of code, such as calling an Intent to open a screen where the alarm can be stopped. What is the most effective approach to accomplish this? I attempted to utilize the Alarm Mana ...

javaandroidkotlinalarm

Generic Typescript Placeholder Design

Imagine you have the following data: const dataA = { name: "John", age: 25, attributes: {specificA: "hello", specificA2: 14, nonspecific:"Well"}, } const dataB = { name: "Lisa", age: 38, attributes: {spe ...

typescriptgenericstypescript-generics

Extending the Express Request Interface in Typescript to Include Additional Properties

In order to enhance the Express Request interface with a new property called "context" for middleware purposes, I am trying to achieve the following: const myMiddleware = (req: Request, res: Response, next: NextFunction) => { req.context.something = ...

typescriptexpresstypescript-typings

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

javascriptangulartypescriptangular7

Enhancing TestNG Failed methods reports with attached screenshots

Currently, I am searching for a solution to include a screenshot in the Results section of the TestNG Report specifically for failed methods. Up until now, I have managed to successfully attach my screenshots to the Reporter Output using the following imp ...

javaseleniumscreenshottestng

employing a parameterized type to accommodate a combination of two diverse items as input

I am facing a challenge with a simple use case and have been unable to find an example that covers it adequately. The situation is this: I have a function that should accept two different objects that are very similar. Therefore, I want to use a generic t ...

typescripttypescript-generics

Tips for resolving TypeScript issues with Vuex mapGetters

When utilizing mapGetters, TypeScript lacks insight into the getters linked to the Vue component, leading to error messages. For instance: import Vue from 'vue'; import { mapActions, mapGetters } from 'vuex'; export default Vue.extend ...

typescriptvue.jsvuex

Receiving contextual information from Microsoft Teams within an Angular application integrated as a tab

I am currently integrating an Angular website into a Microsoft Teams tab. In order to perform certain computations, I need to retrieve the Team ID. To achieve this, I have recently added npm install --save @microsoft/teams-js. Below is the code snippet th ...

angulartypescriptmicrosoft-teams

How to pull data from an HTTP source without relying on promises

Here is a simplified version of the service code I am using: Load(Channel: any) { // let URL = Globals.AppSiteRoot + Channel.URL return this.LoadData(URL) } Load_Default() { let URL = Globals.AppSiteRoot + "di ...

angulartypescriptpromiseobservableionic4

When a React component in TypeScript is passed as a parameter and then assigned to a variable, an error with code TS2604 may occur stating that the JSX element type does not

I am currently facing an issue with handling props of a passed React Element in my Factory. I am getting a TypeScript error that says: TS2604: JSX element type 'this.extraBlock' does not have any construct or call signatures. This is my Child co ...

reactjstypescriptreact-typescripttsx

Steps to Transform String Array into Prisma Query Select Statement

I have a requirement to dynamically select Prisma columns based on client input: ['id', 'createdAt', 'updatedAt', 'Order.id', 'Order.Item.id', 'Order.Item.desc'] The desired format for selection ...

javascriptnode.jstypescriptweb-deploymentprisma

What causes the difference in behavior between using setInterval() with a named function as an argument versus using an anonymous function?

I can't seem to figure out why using the function name in setInterval is causing issues, while passing an anonymous function works perfectly fine. In the example that's not working (it's logging NaN to the console and before the first call, ...

javascripttypescriptsetinterval

Associating UDP socket with multiple ports simultaneously

Is it possible to bind UDP sockets to multiple ports simultaneously? While I understand that the answer may be no, I am in need of this functionality. I have several UDP (multicast) streams coming in on different ports, and I require the order of receive ...

javacudpmulticast

Guidelines for choosing a single integer from a collection of integers and floating-point numbers that have been extracted from a string

In my code, I have a set of doubles and ints that I parsed named gradeList. This data will be passed to a constructor. The grade list looks like this: "5 - 90 85 95.5 77.5 88" The '5' is an integer but the rest should be double values. My parsing ...

javaarraysparsing

Assess JavaScript for Fetch API implementation

Currently, I am utilizing node.js on Windows with the express module to create an HTML page where I need to retrieve data from a server-side function called getfiledata() (I want to keep my Javascript and text file private). I have attempted to use fetch( ...

javascripthtmlnode.jspromisefetch

The listener for @ok is not being activated when using jest-test-utils with b-modal in vue-bootstrap

I have implemented the vue-bootstrap b-modal feature with the @ok="save" hook Here is a snippet of mycomponent.vue: <template> <div> <b-button @click="add">open modal</b-button> <b-modal static lazy id="modal-detail" ...

javascripttypescriptvue.jsbootstrap-vue

What is the best way to add a clickable link/button in Angular 8 that opens a webpage in a new tab?

I'm looking to create a website that opens in a new tab when a link or button is clicked. I'm unsure how to achieve this in Angular 8. ...

angulartypescriptangular8

Utilizing properties from the same object based on certain conditions

Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app. const LinkStyle = { textDecoration : 'none', color : 'rgba(58, 62, 65, 1)', ...

javascriptreactjstypescriptobjectjsx

Analyzing the type of object properties from a different perspective

I am new to TypeScript and have encountered many similar questions. I was able to find a solution, but I'm not sure if it's the most efficient one. When constructing the target object as {obj: someObject, prop: "objectPropName"}, I pas ...

typescript

An unexpected runtime error occurred: TypeError - Unable to use map function on events

When fetching data using graphQL and rendering it on the page, an error occurs: Unhandled Runtime Error TypeError: events.map is not a function I'm unsure if my useState declaration is correct. const [events, setEvents] = useState < any > ([]) ...

reactjstypescriptnext.js