Utilize a string to access and sort the properties of a class in TypeScript

Let's discuss a simple problem involving objects in Javascript. Take for example an object like this:

var obj={
    par1:'value1',
    par2:'value2'
}

In JavaScript, we can access the values like obj['par1']. Now, the question is, can we do something similar in TypeScript with a class structure like this:

export class obj{
    par1:string;
    par2:string;
}

this.obj['par1']=value1

Update

Introducing the Documents class

export class Documents {
    par1: string
    par2: string
    constructor(par1: string,
        par2: string
    ){
        this.par1=par1
        this.par2=par2
    }
}

Here is my attempt at solving the problem:

private docs:Documents[]=new Documents[
    new Documents('value1','value2'),
    new Documents('value3','value4')
];
sort(ordertype:string,property:string){
    for(let doc of this.docs){
        for(let field in doc)
            console.log(doc[field])
    }
}

Encountered an error:

[ts] Element implicitly has an 'any' type because index expression is not of type 'number'.

I have attempted to cast it to a string but without success.

Update 2

Error identified and corrected. The code above is now functioning correctly.

Answer №1

Ensure the Documents array is properly initialized by following this structure:

let docs: Documents[] = [];
docs.push(new Documents('value1', 'value2'));
docs.push(new Documents('value3', 'value4'));

Alternatively, you can use the following syntax:

let docs: Documents[] = [new Documents('value1', 'value2'), new Documents('value3', 'value4')];

If you implement these changes, your code should function correctly. You can test it out in the playground.

Answer №2

Experience the difference by swapping out alert(obj[key]) for alert((obj as any)[key])

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

Can a single shield protect every part of an Angular application?

I have configured my application in a way where most components are protected, but the main page "/" is still accessible to users. I am looking for a solution that would automatically redirect unauthenticated users to "/login" without having to make every ...

Encountering a type error with mongoose's pre-save method while using Express with TypeScript

Currently, my tech stack consists of Express.js in TypeScript with Mongoose. Here is the model I am working with: import mongoose, { Schema, Document, Model } from 'mongoose'; import crypto from 'crypto'; import validator from 'val ...

AgGrid Encounters Difficulty in Recovering Original Grid Information

After making an initial API call, I populate the grid with data. One of the fields that is editable is the Price cell. If I edit a Price cell and then click the Restore button, the original dataset is restored. However, if I edit a Price cell again, the ...

Ways to simulate an initialized class within a function without using dependency injection

Creating a unit test for a service that utilizes aws-sdk to retrieve all files from an s3 bucket poses a challenge. Within the function, the S3 class is instantiated and listObjectsV2 is used to fetch files from the bucket. For testing purposes, it's ...

I would appreciate it if someone could explain the significance of the image display area

Please add a description for this image The table presented below outlines different declaration types: Declaration Type Namespace Type Value Namespace X X Class X X Enum X X Interface X Type Alias X Function X Variable X A ...

Having trouble with GoogleSignIn in React Native Firebase app

During the development of my React Native App, I integrated Firebase as the Authentication System. The app compiled successfully, but upon attempting to use the GoogleSignIn method, an error message appeared on the AndroidToast: "Se ha producido un error. ...

The error message "Unable to access 'useContext' property of null" appeared

I am currently in the process of developing a component library using Material UI, TypeScript, and Rollup. The package has been successfully published, but I am encountering an error when trying to import it into a new project: "Uncaught TypeError: C ...

Creating Typescript type definitions for any object properties

Struggling to find the correct TS syntax with Typescript 3.7.3. I have a random object, for example: var obj = { one: ..., two: ... three: ... }; I want to create a type that includes all keys from that object, like this: type ObjKeys = &ap ...

Can anyone provide guidance on incorporating jQuery typing into an angular2 seed project?

I'm struggling to incorporate jQuery typings into my Angular2-seed project. Within my component, I am utilizing jQuery in the following manner: declare let $: any; export class LeafletComponent implements OnInit { ngOnInit(): void { th ...

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

Angular 10 - Compilation errors caused by the element's location

When running 'ng serve' or 'ng build' in Angular 10, I encountered a build error that stated: ERROR in projects/project-navigator/src/app/modals/building-permissions.component.html:89:61 - error NG8002: Can't bind to 'ngClass& ...

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

In my Typescript project (ProjectA), I am utilizing several node packages. Additionally, I have a babel project (ProjectB) with a build configuration that supports output for multiple module definition standards such as amd, common.js, and esm. My questio ...

Retrieving information selectively using useSWRImmutable

Having issues fetching data using useSWRImmutable. The problem arises when attempting to display the fetched data inside the UserRow component. Even though I can successfully print the data outside of the UserRow component, any console.log() statements wi ...

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

What is the proper way to validate a property name against its corresponding value?

Here is the structure of my User class: export class User { public id: number; //Basic information public email: string; public firstName: string; public lastName: string; //Permissions public canHangSocks: boolean; p ...

The Tailwind CSS Chrome extension is causing disruptions on the websites I view

Currently, I am in the process of creating a chrome extension using various tools like React, Typescript, TailwindCSS, and a custom Webpack configuration. To enhance user experience, I have modified the default action in manifest.json so that clicking on t ...

The latest release of Angular2, rc1, eliminates all parameters that are not in

In the previous beta version, I was able to analyze using split Location.path(), but now it seems to have been removed. How can I prevent this removal? Interestingly, everything works well with matrix parameters (;id=123;token=asd). This was tested on a ...

The logic behind combining elements from two arrays in JavaScript/TypeScript

Explanation of two different array formats const arr1 = [ { "elementName": "one" }, { "elementName": "two" } ] const arr2 = [ { "type": "RPT_PROPERTY_DEMOGRP", "values": [ { "label": "HH" }, { " ...

The Ngrx action fails to finish despite encountering an error during execution

An Issue with Action Completion Post-Error Within my application, I have implemented an action for deleting a user. Prior to deletion, the user is prompted on screen with a Dialog to input the administrator password. If the correct password is provided, t ...

In React TS, the function Window.webkitRequestAnimationFrame is not supported

I'm facing an issue where React TS is throwing an error for window.webkitRequestAnimationFrame and window.mozRequestAnimationFrame, assuming that I meant 'requestAnimationFrame'. Any suggestions on what to replace it with? App.tsx import Re ...