Assign a variable to the key of a statically typed object in TypeScript

Is there a cleaner way to explicitly type an object and assign key-value pairs where the keys are variable names?

I found a solution using ES2015 template literals and JSON.parse() that looks like this:

interface MyObj {
    [propName: string]: number;
}

const myVar = 'key';
const objString = `{
    "${myVar}": 1
}`;

const myObj: MyObj = JSON.parse(objString);

Although this implementation works, I'm concerned it may be challenging to manage in the future. Any suggestions for a more elegant or straightforward approach?

Answer №1

One interesting feature of Javascript and Typescript is their ability to handle left-hand variables like this: { [variable]: value }. Additionally, it's possible to add properties at a later time using syntax like obj[variable] = value

Consider the following example:

interface NewObject {
  [keyName: string]: number
}

const chosenKey = 'identifier';

// method 1
const myNewObj: NewObject = { [chosenKey]: 1 };

// method 2
const myNewObj: NewObject = {};
myNewObj[chosenKey] = 1;

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

Confusion arises from the error message 'No overload matches this call'

Currently, I am working on a weather application using Angular based on the concepts from the book Angular for Enterprise-Ready Web Applications - Second Edition. I am in the process of adding a search component to the app, which will allow users to displa ...

Incorporating a React Bootstrap spinner into your project

I am looking to enhance my modal by adding a spinner to it. Here is the current structure of my modal: <Modal show={modal.show} onHide={onHideModal}> <form onSubmit={onImport}> <Modal.Header closeButton> <Mo ...

Issue: Import statement cannot be used outside a module in Appium

Encountering the following error while working on a colleague's laptop, so it appears that there is no issue with the code itself. It could be related to my local packages but I am not entirely certain. node version: v18.20.1 npm version : 10.5.0 impo ...

A guide on dynamically showcasing/summoning icons in react by utilizing array data

QUESTION: 1 (SOLVED!) https://i.stack.imgur.com/1M1K7.png What is the best way to display icons based on an array of data codes? const data = [{ img: '01d' }, { img: '02d' }] if(data) { data.map((item) => ( <img src={`./ ...

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

I have integrated an npm package called aurelia-google-maps into my application. This package includes various distribution folders such as AMD, System, CommonJS, Native Modules, and ES2015 within the /node_modules/ directory like so: /node_modules/ /a ...

Having trouble retrieving data from redux toolkit using typescript

I've been diving into the world of Typescript by building a simple todo app using React, Redux-toolkit, and Typescript. One issue I encountered is when trying to access data from the store with useSelector. The retrieved object contains the desired va ...

What is the best way to exclude React.js source files from a fresh Nest.js setup?

My setup includes a fresh Nest.js installation and a directory named "client" with a clean create-react-app installation inside. Here is the project structure: ./ ...some Nest.js folders... client <- React.js resides here ...some more Nest.js fo ...

Prevent editing one item in a dropdown list in Angular by setting it to read-only

If I have a dropdown menu with options like "WORK", "RELEASE", and "OPEN", how can I make the second option, "RELEASE", read-only while allowing "WORK" and "OPEN" to be selected? Here is a snippet of the template code: <form [formGroup]="form" ...

Tips for selecting an image from the gallery with IONIC 3

Looking for guidance on extracting an image from the gallery in IONIC 3? I attempted to grab an image from the gallery but encountered some issues. Visit this link for more information This resource may also be helpful ...

The Network plugin is having issues with the PWA application in Ionic 4

I've been utilizing the network plugin successfully on native/Cordova devices. However, I have encountered an issue when trying to use it on a PWA app (specifically when there is no wifi connection). Can anyone shed light on why this might be happenin ...

Could you tell me the kind of theme used in Material-UI version 5?

I've decided to switch my project over to MUI version 5 and embrace the use of emotion CSS. It's come to my attention that I need to incorporate the theme property, but now TypeScript is prompting me for a type definition for it. The current code ...

Improving JavaScript Functions: Minimize duplication of helper methods

I have a set of helper functions that check for the presence of specific strings in an array and certain steps before triggering other functions. The reason for keeping them separated is because arrTours must be associated with only those arrSteps. // Help ...

Tips for creating a custom script in my React Native application

My React Native app requires a script to generate static files during the release process. The app is a game that utilizes pre-computed boards, which are resource-intensive to compute. Therefore, I am developing a script that will create these boards and s ...

Deep copying arrays in Typescript using the spread operator

I'm really struggling to grasp the concept of the spread operator in TypeScript. Every time I try to use it to duplicate object1. let object2 = { ...object1, }; I end up with a brand new object2 that contains all the items from object1, even if t ...

What sets apart the utilization of add versus finalize in rxjs?

It appears that both of these code snippets achieve the same outcome: Add this.test$.pipe(take(1)).subscribe().add(() => console.log('added')); Finalize this.test$.pipe(take(1), finalize(() => console.log('finalized'))).sub ...

React typescript props not appearing as potential defined, even after implementing the '?' optional operator and '| undefined'

I've noticed that my linter has suddenly stopped flagging potentially undefined properties passed into my React components. For instance: interface BooleanTypeObject { prop1: true } interface MyComponentProps { disable ...

What is the process of assigning a value type to a generic key type of an object in typescript?

I am currently working on developing a function that can merge and sort pre-sorted arrays into one single sorted array. This function takes an array of arrays containing objects, along with a specified key for comparison purposes. It is important to ensure ...

Unable to bring in personalized typescript package in node.js

After struggling for hours trying to figure it out on my own, I finally decided to seek help on stackoverflow. I have a custom typescript project/package that I want to use with zx. I packed it using npm pack and installed the tar.gz globally. However, whe ...

Collaborative Vue component: Clients need to manually import the CSS

I recently created a Vue component using TypeScript that resulted in a separate CSS file being generated after the build process. However, I noticed that when the client imports this component, the CSS file is not imported automatically and needs to be exp ...

one-time occurrence of $mdToast injection within a parent class

Seeking advice on how to efficiently place a single instance of $mdToast (from Angular Material) into a base class (Typescript). In my UI, I have five tabs with separate controller instances and it seemed logical to centralize the $mdToast declaration in a ...