Is it possible to generate a property for an interface by casting a key within a for-in loop?

When I attempt to set a property on an object with a value from a dynamically generated form, I utilize a for-in loop to identify a property in the object and assign it.

FormFeatureArray.forEach((el) => {

     // form handling stuff omitted
      For(const key in myObject){
        If(key === el.feature){
          myObject.key = formInputField.value
            }
           }
       })

This leads to a ts(2339) error that I would like to resolve by casting key as a property of myObject. However, since I do not know which property of the interface key corresponds to, is there a way to cast key as a guaranteed property of the interface of myObject, or suppress the warning for that line? I am looking for something along these lines:

myObject.(key as aPropertyOfMyObject) = formInputField.value

The interface for myObject would be defined as follows:

Interface MyObjects {
Name: string
A: number
B: number 
C: number 
}

key could match any of those properties of myObject, depending on the field selected in the form at runtime.

Answer №1

To achieve the desired behavior of having the key typed as keyof MyObject, you can implement the following solution:

const keys = Object.keys(MyObject) as (keyof typeof MyObject)[];
for (const key of keys) {
    if (key === element.target) {
        MyObject[key] = inputValue.value;
    }
}

It's important to note that you should access the object property using MyObject[key] rather than MyObject.key. Using dot notation would be equivalent to MyObject["key"], which may not yield the desired outcome. Alternatively, if your goal is simply to check if element.target exists within the keys of MyObject, you could simplify by:

const keys = Object.keys(MyObject);
if (keys.includes(element.target)) {
    MyObject[element.target as keyof typeof MyObject] = inputValue.value;
}

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

Having trouble declaring a module in an npm package with Typescript?

I'm currently working on a project using Vue.js and TypeScript. Within project "A," I am utilizing a private npm package called "B," which serves as a component library. This package "B" also incorporates another library, 'tiptap,' which unf ...

A TypeScript/Cypress command that restricts input parameters to specific, predefined values

I have a Cypress command with a parameter that I want to restrict so it only accepts certain values. For example, I want the columnValue to be limited to 'xxx', 'yyy', or 'zzz'. How can I achieve this? Cypress.Commands.add( ...

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for

Currently, I am developing a small todo command line utility with a straightforward program structure. The main file is responsible for parsing the command line arguments and executing actions such as adding or deleting tasks based on the input provided. E ...

Mastering Redux Toolkit - Ensuring Payload Type Verification is in Place when Invoking an Action Creator

I have been utilizing the redux toolkit for a while now and I appreciate how it helps in reducing redundant code. I am also interested in incorporating typescript, but I am facing challenges with getting the typechecking of an action payload to function pr ...

Is it possible to globally define a namespace in Typescript?

Seeking a way to make my Input module accessible globally without the need for explicit path definitions. Currently, I have to import it like this: import { Input } from "./Input/Input";. Is there a method to simplify the import statement for modules con ...

Sending information from a component inside a router-outlet to a higher-level "Parent" component in Angular 2

Is there a way to transfer data from a component embedded within a router-outlet tag in a "parent" component's HTML template back to the parent component? ...

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

Compiler error occurs when trying to pass props through a higher-order component via injection

Recently, I have been experimenting with injecting props into a component using a higher order component (HOC). While following this insightful article, I came up with the following HOC: // WithWindowSize.tsx import React, {useEffect, useMemo, useState} fr ...

The command "tsc" was not found in this bash session

Currently, I am using a MAC and attempting to set up TypeScript. I followed the installation process by running sudo npm install -g typescript and received the following output: Password: /Users/<myuserid>/node/bin/tsc -> /Users/<myuserid& ...

Issue with Angular 2 Observable not triggering the complete function

I've been experimenting with the hero app tutorial for Angular 2 and currently have this Component set up: import { Component, OnInit } from '@angular/core' import { Subject } from 'rxjs/Subject'; import { Hero } from "./hero"; im ...

Looking to incorporate ipcRenderer from Electron into your Angular project? Having trouble accessing variables passed from the preload script?

I am struggling with incorporating ipcRenderer into the 'frontend' code of my electron app. Although I found examples in the documentation that use require, this method is not accessible on the frontend side where I am utilizing Angular. In the ...

The Console.Log function will not run if it is placed within the RXJS Tap operator

In my current setup, I have the following observables: this.authenticationService.isSignedIn() -> Observable<Boolean> this.user$ -> Observable<UserModel> I am in need of checking a condition based on both these observables, so I attempt ...

Is there a way for me to steer clear of using optional chaining in Typescript?

I'm currently working on storing object data known as Targetfarms in redux. I've defined a type named Farmstype for the Targetfarms. However, when I retrieve the Targetfarms using useSelector in the MainPage component and try to access targetfar ...

Tips for accessing a specific ListItem within the Menu Component using MUI for React

Within my code, I am working with a List that contains multiple ListItems pulled from an array called myCollection. Each ListItem has a MenuIcon element which triggers a menu to appear, providing the option to delete the specific item. Here is a simplified ...

What is the best way to refresh information following its removal?

In my app, I have implemented a feature where posts are displayed as HTML cards using a component called PostList. Each card has a delete button to remove it from the list. The issue I am facing is that when I delete a card, it remains visible in the post ...

Dealing with Unexpected Timeout Errors and Memory Leaks in Express/Typescript Using Jest, Supertest, and TypeORM

Currently, I am in the process of writing unit tests for an express API. Each test suite initiates a fresh instance of an express server before running the tests. Individually, each test suite runs smoothly without any problems. However, when executed tog ...

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

A remote server and a local client are set up to communicate through a simple post request. The client sends the request with one header Content-Type: application/json and includes the body '{"text": "hello"}'. Below is the s ...

Using Angular's async, you can retrieve a value returned by a promise

Within the library I am currently utilizing, there is a method called getToken which can be seen in the following example: getApplicationToken() { window.FirebasePlugin.getToken(function(token) { console.log('Received FCM token: ' + to ...

What is the best way to create a general getter function in Typescript that supports multiple variations?

My goal is to create a method that acts as a getter, with the option of taking a parameter. This getter should allow access to an object of type T, and return either the entire object or a specific property of that object. The issue I am facing is definin ...

Trying out Angular2 service using a fabricated backend

Just a heads up: I know Angular2 is still in alpha and undergoing frequent changes. I am currently working with Angular2 and facing an issue with testing an injectable service that has a dependency on http. I want to test this service using a mock backend ...