Develop a versatile class for storing an array of key-value pairs (dictionary) using TypeScript

I am looking to implement a Dictionary class in my application. I have created a class with an Array of KeyValuePair to store my list.

export class KeyValuePair<TKey, TVal>{
key:TKey;
value:TVal;

constructor(key:TKey, val:TVal){
    this.key = key;
    this.value = val;
}

export class Dictionary<TKey, TVal>{
    array: Array<KeyValuePair<TKey, TVal>>
}

let myClassInstance:Dictionary<number, string> = ...;

Some Questions:

  1. I want to be able to iterate through it using forEach or in a loop like 'let x of myClasInstance', how can I achieve this? (myClassInstance.forEach(...);)
  2. Can I access the array in the class instance without referring to className.arrayName directly? (myClassInstance.find(...);)
  3. Is it possible to use the class instance as an index to retrieve values? (myClassInstance[1])
  • If there is a better structure for this implementation, I would love to hear and learn about it. Thank you!!!

Answer №1

Discover the wonders of Maps, which are like dictionaries in JavaScript.

You can utilize Maps effectively by visiting this Playground.

You can easily iterate through their values, keys, or entries with typed results. Need to find something? Just use get. And if you need them as arrays, simply convert with [...myMap.values()], keeping in mind they will be ordered based on key insertion. (or use entries() and map for custom sorting)

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

Stopping all child events upon clicking (when navigating to a different tab) in RxJS

Currently, I am fetching all the designs (let's say 100) from the database and iterating through them. For each design, I am fetching the design image using a child component. <div *ngFor="let design of designs"> <div (click)="sho ...

Oops! A mistake was made by passing an incorrect argument to a color function. Make sure to provide a string representation of a color as the argument next time

Encountering an issue with a button react component utilizing the opacify function from the Polished Library The styling is done using styled-components along with a theme passed through ThemeProvider. Upon testing the code, an error is thrown. Also, the ...

"An error occurred while trying to resolve "npm" from npm.fontawesome.com

Within my Angular project, I am utilizing a module from When I run the following command: npm --loglevel info install grun locally, it finishes without any issues. However, when I run this command on the build server, an error occurs. In my .npmrc file: ...

Is it possible for me to transition to working with Angular 8 after mastering Angular 4?

After mastering Angular 4, I'm interested in knowing the key distinctions between it and Angular 8. What new concepts or features do I need to familiarize myself with beyond what I already know from Angular 4? Thank you for your help. ...

Sending selected IDs from the JSON data

In my project, there is a JSON file named "workers" which contains information about all the workers. I have created a select component to display the names of the workers like this: https://i.sstatic.net/0Glyf.png Currently, I am selecting some workers ...

Which tools should I combine with Angular for developing both Android and iOS applications?

My primary focus has been on developing web apps using Angular, but now I am interested in creating native Android and iOS apps with Angular. I have heard about using Cordova, Capacitor, and NativeScript for this purpose, as alternatives to Ionic due to pe ...

What could be causing text to not appear when a button is clicked with Observable in Angular 2?

I am experiencing an issue with my code that is intended to display the string representation of data using an Observable upon clicking a button. Below is the code snippet (Plunker link: https://plnkr.co/edit/wk3af4Va2hxT94VMeOk9?p=preview): export class ...

Error: The file named '/accounts.ts' cannot be recognized as a module within a Node.js API

After researching this issue, I have found some answers but none of them seem to solve my problem. Below is the code in my model file: // accounts.ts const mongoose = require('mongoose'); var autoincrement = require('simple-mongoose-autoi ...

Encountering issues with Socket.io: consistently experiencing websocket connection failures along with persistent 404 errors on the

I am facing issues with setting up a websocket using socket.io. The server-side seems to be making a GET call successfully, but on the client-side, I am getting a 404 error: GET http://localhost:6543/socket.io/?uuid=258c4ab9-b263-47ca-ab64-83fe99ea03d4& ...

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Presently, my breadcrumb has a scrollable wrap with text overflowhttps://i.sstatic.net/dhllv.png I want to make the overflowed text continue on the next line. How can I achieve this? The CSS code I am using for the image attached is as follows: .breadcrumb ...

What is the proper way to utilize e.key and e.target.value in TypeScript when coding with React?

I'm struggling to get e.key and e.target.value working with the following code: const handleInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement> ) => { if(e.key ==='Enter') { dfTextQuery(e.target.value) } }; Why is & ...

Ways to avoid inaccurate information in Angular without relying on form functionalities

In my Angular application, I am looking for a way to easily validate number inputs without using forms. Specifically, I want to prevent users from entering values below 1 or greater than 99. I have successfully developed a component that displays dynamic d ...

Invoke the HTTP API from the device application

I need to make an API call to a server that does not have the HTTPS protocol. I came across this post on Stack Overflow: https://stackoverflow.com/questions/57433362/api-calls-made-in-ionic-4-app-not-working-on-android-device The post mentions that HTTP ...

What is the best way to invoke a function only once in typescript?

Struggling to implement TypeScript in React Native for fetching an API on screen load? I've been facing a tough time with it, especially when trying to call the function only once without using timeouts. Here's my current approach, but it's ...

The Redux Toolkit Slice is encountering an issue where it generates the incorrect type of "WritableDraft<AppApiError> when the extraReducer is

I defined my initial state as MednannyAppointments[] for data and AppApiError for error. However, when I hover over state.error or state.data in my extraReducer calls, the type is always WritableDraft. This behaviour is confusing to me. Even though I have ...

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...

Angular 4 in combination with ngx-datatable is showing a 404 error for the @swimlane/ngx-datatable package

Just starting out with Angular and I kicked things off by running this command: git clone https://github.com/angular/quickstart appName I've made the upgrade to Angular 4 and everything seems to be in order. Here's the output I got after running ...

Having trouble deciding between flatMap and concatMap in rxJs?

Having trouble grasping the distinction between flatMap and concatMap in rxJs. The most enlightening explanation I found was on this Stack Overflow post about the difference between concatMap and flatMap So, I decided to experiment with it myself. import ...

A better choice than Java's <? super SomeType> in Typescript

Is there a scenario in which one of the generic parameters used to create an instance of my class should be a superclass of another class? In Java, this is easily achievable using <? super SomeType>. What would be the equivalent in TypeScript? ...

Utilizing Angular with the development environment of Visual Studio 2015

Having trouble setting up my angular 2 application in visual studio 2015 (with update 1). The typescript compile is throwing an error - it says 'Cannot find module '@angular/core' at import { NgModule } from '@angular/core';. I eve ...