TS-Recursive JSON type is not compatible with variables in the node value

As a beginner in Type Script, I am currently working on creating an object with a specific structure:

users {

  "user1" : {

    "startDate" : <timestamp1>

  }

  "user2" : {

    "startDate" : <timestamp2>

  }

} In my attempt to achieve this, I came up with the following solution:

  type JSONValue =
    | string
    | number
    | boolean
    | { [x: string]: JSONValue }
    | { JSONValue }
    | Array<JSONValue>;

  let sessions: JSONValue = [];
  let obj: JSONValue = {
      this.loggedUser.getName() :
        { "startDate": new Date().getTime() }
    }

However, the code failed to compile due to the rejection of the property: this.loggedUser.getName(). When I used a constant string instead, it worked fine. Additionally, I encountered an issue where I was unable to create a JSON object users {}, so I resorted to using push to handle an array instead.

Any assistance on this matter would be greatly appreciated.

Answer №1

The issue lies in the requirement to use square brackets when generating property names using the object initializer syntax. This rule is specific to JavaScript and is not related to TypeScript.

To resolve this, you can utilize the following code snippet:

let newObj: JSONValue = {
    [this.currentUser.getName()]: { "startDate": new Date().getTime() }
};

For more information, refer to the MDN documentation on Computed property names within Object initializer

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

Consistentize Column Titles in Uploaded Excel Spreadsheet

I have a friend who takes customer orders, and these customers are required to submit an excel sheet with specific fields such as item, description, brand, quantity, etc. However, the challenge arises when these sheets do not consistently use the same colu ...

Tips for creating an observable in Angular 2

I'm having trouble declaring an observable and adding data to it in Angular 2. I've spent the last 5 hours trying to figure it out. Here's what I've attempted: this.products : Observable<array>; var object = {"item": item}; thi ...

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

Typescript is throwing an error stating that utilizing 'undefined' as an index type is invalid

When working with TypeScript and React, I pass xs, sm, md, lg as props to the component. Each size corresponds to a specific pixel value (14px, 16px, 18px, 24px) that is then passed to an Icon component. The errors mentioned in point (1) occur at the line ...

Creating test cases for a service that relies on a Repository<Entity> to consume another service

Having trouble creating tests for an auth.service that seems pretty straightforward from the title. However, every time I run the tests, I encounter this error: TypeError: Converting circular structure to JSON --> starting at object with cons ...

Having trouble locating the name 'it' in Jest TypeScript

After setting up Jest in React + TypeScript, I encountered an error when trying to run a test using the command npm test. The error message displayed was: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try ` ...

Anticipate the middleware function to either invoke the next function or return a HTTP 400 status code

I am eager to delve into unit testing and am looking to test my Node API. I am utilizing Express with Typescript and Jest for testing. Prior to invoking the controller middleware, I apply the route input validation middleware to verify the validity of the ...

Tips for creating a TypeScript function that can accept an array of concatenated modifiers with the correct data type

Can I modify data using a chain of function modifiers with correct typing in TypeScript? Is this achievable? const addA = (data: {}) => { return { ...data, a: "test" } } const addB = (data: {}) => { return { ...data, ...

Is there a way to add an event listener to dynamically generated HTML using the v-html directive?

I have a string variable named log.htmlContent that contains some HTML content. This variable is passed into a div to be displayed using v-html. The particular div will only be displayed if log.htmlContent includes an img tag (http: will only be present in ...

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

Importing images in Typescript is a simple and effective

I came across a helpful solution at this Stackoverflow thread However, I encountered an error: [ts] Types of property 'src' are incompatible. Type 'typeof import("*.png")' is not assignable to type 'string | undefined& ...

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent

I've encountered an issue with my React project that involves streaming live video through a WebSocket. Whenever the camera firmware is updated, I face an error in establishing the WebSocket connection. Here's how I initiate the WebSocket: wsRe ...

What is the approach to forming a Promise in TypeScript by employing a union type?

Thank you in advance for your help. I am new to TypeScript and I have encountered an issue with a piece of code. I am attempting to wrap a union type into a Promise and return it, but I am unsure how to do it correctly. export interface Bar { foo: number ...

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

I am facing the challenge of calling a simple websocket closure API when the browser is closed in my project. I attempted to utilize HostListener, but unfortunately it did not work as expected. You can find the code snippet below: https://stackblitz.com/ ...

Having trouble setting up mongodb-memory-server 8 to work with jest

I am currently working on integrating the latest version of mongodb-memory-server with jest on a node express server. While following the guide provided in the mongodb-memory-server documentation (), I encountered some gaps that I am struggling to fill in. ...

What is the best way to iterate over a nested array of objects and render them in my HTML using Angular/Ionic?

One of the challenges I'm facing involves working with an interface structured like this: export interface SeriesCard { type: string, imageUrl: string, title: string, category: string, seriesItems: SeriesItems[]; } Currently, my Service con ...

The seamless union of Vuestic with Typescript

Seeking advice on integrating Typescript into a Vuestic project as a newcomer to Vue and Vuestic. How can I achieve this successfully? Successfully set up a new project using Vuestic CLI with the following commands: vuestic testproj npm install & ...

Issue with MUI 5 Button component not receiving all necessary props

Currently, I am attempting to create a customized MUI5-based button in a separate component with the following code: import {Button, buttonClasses, ButtonProps, styled} from '@mui/material'; interface MxFlatButtonProps extends Omit<ButtonProp ...

Ensure that you call setState prior to invoking any other functions

Is there a way to ensure that the setSearchedMovie function completes before executing the fetchSearchedMovie(searchedMovie) function? const { updateMovies, searchedMovie, setSearchedMovie } = useContext(MoviesContext); const fetchMoviesList = (ev ...

What could be the reason for the ERROR message saying, "Cannot read property '0' of undefined"?

I'm really struggling to understand why I keep receiving an Undefined error for tagged_Assets. Can someone please shed some light on this for me? Thank you. Model.ts export class TaggedAssests { device_id: string; hasTag: boolean; } Compon ...